UniApp上传图片：uni.chooseImage在App和多平台应用中如何使用？

在UniApp中实现跨平台图片上传功能时，核心思路是通过条件编译区分不同平台，并调用各平台适配的API。以下是具体实现方案及关键注意事项：

• 关键API：uni.chooseImage + uni.uploadFile
• 实现要点：

  需处理Android权限问题（存储权限、相机权限）

  大文件建议压缩后上传

  uploadImage(filePath) { uni.compressImage({ src: filePath, quality: 80, success: (compressedRes) => { uni.uploadFile({ url: '
  https://your-server.com/upload'
  , filePath: compressedRes.tempFilePath, name: 'file', formData: { userId: '123' }, success: (uploadRes) => { console.log('上传成功', JSON.parse(uploadRes.data)); } }); } });}

• 关键技术：FileReader + FormData
• 实现要点：

  需处理跨域问题（CORS）

  建议显示上传进度

  uploadH5Image(file) { const formData = new FormData(); formData.append('file', file); formData.append('userId', '123'); uni.request({ url: '
  https://your-server.com/upload'
  , method: 'POST', data: formData, header: { 'Content-Type': 'multipart/form-data' }, success: (res) => { console.log('H5上传成功', res.data); } });}

• 关键API：uni.chooseImage + uni.uploadFile
• 实现要点：

  需配置小程序合法域名

  可使用wx.compressImage优化体验

  uploadMiniProgramImage(tempFilePath) { wx.compressImage({ src: tempFilePath, quality: 70, success: (res) => { wx.uploadFile({ url: '
  https://your-server.com/upload'
  , filePath: res.tempFilePath, name: 'file', formData: { token: 'abc' }, success: (res) => { console.log('小程序上传成功', res.data); } }); } });}

1. 统一接口设计：

   封装跨平台上传方法，对外暴露相同接口

   // 统一上传接口function unifiedUpload(file) { #ifdef APP-PLUS return uploadAppImage(file); #elif H5 return uploadH5Image(file); #else return uploadDefaultImage(file); #endif}

2. 错误处理机制：

   捕获各平台特有错误码

   提供用户友好的提示

   handleError(err) { #ifdef MP-WEIXIN if (err.errMsg.includes('chooseImage:fail')) { uni.showToast({ title: '请授权相机权限', icon: 'none' }); } #endif // 其他平台错误处理...}

3. 性能优化方案：

   大文件分片上传（App端可用plus.io.request）

   并发控制（建议同时上传不超过3个文件）

   本地缓存已上传文件路径

1. Android选择图片失败：

   检查manifest.json中是否配置了存储权限

   测试不同Android版本兼容性

2. iOS上传卡顿：

   压缩图片质量（建议70%-80%）

   使用WebP格式减少体积

3. H5跨域问题：

   服务器配置Access-Control-Allow-Origin: *

   开发环境配置代理（vue.config.js）

4. 小程序域名限制：

   在微信公众平台配置合法域名

   开发阶段勾选"不校验合法域名"

1. 图片预览功能：

   previewImage(current) { #ifdef APP-PLUS plus.gallery.preview(current); #else uni.previewImage({ current: current, urls: this.imageList }); #endif}

2. 多图上传进度显示：

   使用uni.showLoading显示总体进度

   各平台通过上传事件的onProgressUpdate回调更新进度

3. 图片裁剪功能：

   App端使用plus.nativeObj.Bitmap

   H5端使用cropperjs库

   小程序端使用<camera>组件或第三方插件

通过以上方案，可实现95%以上场景的跨平台图片上传需求。实际开发中建议先实现核心功能，再逐步完善各平台特有优化。对于复杂需求（如视频上传、EXIF信息处理等），可参考UniApp官方插件市场中的现成解决方案。