uni.chooseMedia 只能上传MP4 和 jpg

<think>好的，我现在需要帮用户解决如何封装uni.chooseMedia方法的问题。用户提到了示例代码和最佳实践，所以我要先理解uni.chooseMedia的作用和常见使用场景。 首先，uni.chooseMedia是uni-app中用于选择图片、视频等媒体文件的API。用户可能想要封装这个API以便在多个地方复用，或者添加一些统一处理，比如文件类型限制、大小限制、上传前的处理等。 接下来，我需要参考用户提供的引用内容。用户引用了三个资料，其中引用[1]提到了uni.chooseMedia的官方文档，引用[2]是关于uni.request的封装示例，引用[3]则展示了个人信息维护中的使用，包括选择图片和上传文件。这些资料可以帮助我理解如何结构化和封装类似的API。 根据引用[2]中的示例，封装uni.request时使用了Promise，并处理了配置项的合并，以及成功和失败的回调。这可能是一个模板，可以借鉴到uni.chooseMedia的封装中。同样，引用[3]中的profile.ts文件展示了如何将API调用封装成函数，并处理请求和响应，这可能涉及到上传文件的部分。 用户的需求是封装uni.chooseMedia以实现特定功能，可能的特定功能包括：限制选择的文件类型、数量，设置文件大小限制，自动上传到服务器，处理上传结果等。因此，封装后的方法可能需要参数配置，如count、mediaType、sizeLimit等，并在调用后返回处理后的结果。 我需要考虑封装的结构。通常，封装一个函数，接受配置参数，返回Promise，这样可以使用async/await或者.then()处理。同时，在封装中加入参数校验，比如文件大小超过限制时提示错误，统一处理错误信息，比如使用uni.showToast。 另外，上传文件的部分可能需要结合uni.uploadFile，如引用[3]中的例子，在选择了文件之后调用上传接口。因此，封装函数可能包括选择文件和上传两个步骤，或者分开处理，让用户选择是否上传。 还要考虑类型声明，如引用[3]中的类型ProfileDetail和ProfileParams，可能需要为封装方法定义TypeScript接口，尤其是如果用户使用TypeScript的话。 现在，我需要组织步骤：首先封装选择媒体文件，添加配置选项，处理结果，处理错误，然后可能扩展上传功能。同时，提供示例代码和最佳实践，比如参数配置、错误处理、UI反馈、上传结合等。 需要检查可能的边界情况，比如用户取消选择时如何处理，文件大小超出限制时的提示，网络错误时的重试机制等。同时，确保代码符合uni-app的规范，比如路径处理、API调用方式。 最后，生成相关问题，可能涉及参数配置、上传后的处理、多平台适配、扩展功能等。</think>### 封装`uni.chooseMedia`方法实现步骤 #### 1. 基础封装（添加参数校验与统一回调） ```javascript // utils/media.js export const chooseMedia = (options = {}) => { const defaultOptions = { count: 9, // 默认最多选9个文件 mediaType: ['image'], // 默认只选图片 sizeLimit: 10 * 1024 * 1024, // 默认10MB限制 sourceType: ['album', 'camera'], // 来源相册和相机 }; return new Promise((resolve, reject) => { uni.chooseMedia({ ...defaultOptions, ...options, success: (res) => { // 校验文件大小 const invalidFiles = res.tempFiles.filter(file => file.size > (options.sizeLimit || defaultOptions.sizeLimit) ); if (invalidFiles.length > 0) { uni.showToast({ title: `文件大小超过${options.sizeLimit/1024/1024}MB`, icon: 'none' }); return reject(new Error('FILE_SIZE_EXCEEDED')); } resolve(res); }, fail: (err) => { uni.showToast({ title: '选择失败', icon: 'none' }); reject(err); } }); }); }; ``` #### 2. 扩展封装（含自动上传功能） ```javascript // utils/mediaUpload.js import { chooseMedia } from './media.js'; import { http } from '@/utils/http'; // 引用[2]封装的请求方法 export const uploadMedia = async (config = {}) => { try { // 选择文件 const mediaRes = await chooseMedia({ mediaType: ['image'], ...config }); // 上传文件 const uploadTasks = mediaRes.tempFiles.map(file => uni.uploadFile({ url: '/api/upload', filePath: file.tempFilePath, name: 'file', formData: { type: 'user_avatar' } // 附加表单数据 }) ); // 等待所有上传完成 const uploadResults = await Promise.all(uploadTasks); return uploadResults.map(res => JSON.parse(res.data)); } catch (err) { console.error('上传流程失败:', err); throw err; } }; ``` ### 最佳实践建议 1. **参数配置建议** ```javascript // 示例：限制只能选择1张1MB内的PNG图片 chooseMedia({ count: 1, mediaType: ['image'], imageFileType: ['png'], sizeLimit: 1024 * 1024 }) ``` 2. **错误处理增强** ```javascript // 在调用处添加错误类型判断 try { await uploadMedia(); } catch (err) { if (err.message === 'FILE_SIZE_EXCEEDED') { // 显示自定义错误提示 } else if (err.errMsg.includes('cancel')) { // 处理用户取消选择 } } ``` 3. **UI反馈集成** ```javascript // 在上传过程中显示进度提示 uni.showLoading({ title: '上传中...', mask: true }); const results = await uploadMedia(); uni.hideLoading(); ``` 4. **类型声明（TypeScript）** ```typescript // types/media.d.ts declare interface ChooseMediaOptions { count?: number; mediaType?: ('image' | 'video' | 'mix')[]; sizeLimit?: number; imageFileType?: string[]; } declare function chooseMedia(options?: ChooseMediaOptions): Promise<UniApp.ChooseMediaSuccessResult>; ``` ### 引用说明 使用`uni.chooseMedia`时需注意各平台的差异表现，例如微信小程序对`count`参数的限制不同[^1]。上传功能建议结合`uni.uploadFile`实现，可参考全局请求封装方法[^2]，而用户信息维护场景中的文件上传处理方式可直接应用于头像修改等模块[^3]。

### 使用 `uni.chooseMedia` 实现图片上传 在 UniApp 中实现图片上传功能可以借助内置的 `uni.chooseMedia` 方法。此方法允许用户从本地相册选择或通过相机拍摄来获取多媒体文件，如图片和视频[^1]。 下面是一个简单的例子展示如何利用该接口完成图片的选择并将其发送到服务器： ```javascript // 调用 chooseMedia 接口选取一张或多张照片 function selectImages() { uni.chooseMedia({ count: 9, // 默认最多可以选择的数量为9 mediaType: ['image'], // 只能选图 sourceType: ['album', 'camera'], // 来源既可以是相册也可以是摄像头 success(res) { console.log('Selected images:', res.tempFiles); const tempFilePaths = res.tempFiles.map(file => file.tempFilePath); uploadImages(tempFilePaths); // 将所选图像路径传递给上传函数处理 }, fail(err){ console.error('Failed to choose image.', err); } }); } // 定义一个用于实际执行上传操作的方法 async function uploadImages(paths) { paths.forEach(path => { uni.uploadFile({ url: 'https://example.com/upload', // 替换成自己的服务端地址 filePath: path, name: 'file', formData: {'user': 'test'}, success(uploadRes) { console.log(`Upload succeeded! Server response is ${uploadRes.data}`); }, fail(uploadErr) { console.error('Image upload failed.'); } }) }); } ``` 上述代码片段展示了怎样调用 `chooseMedia` 并随后使用 `uploadFile` 发送选定的照片至指定 URL 地址。需要注意的是，在真实的应用场景下还需要考虑错误处理、进度提示等功能以提升用户体验。 对于更详细的官方文档说明以及更多参数配置选项，请参阅 [UniApp 文档](https://uniapp.dcloud.io/api/media/image?id=chooseimage) 或者尝试访问具体的 API 页面了解最新信息。