UniApp跨端图片上传实战：统一API与性能优化

1. 跨端图片上传的痛点与UniApp优势

在移动互联网时代，图片上传功能几乎成为各类应用的标配需求。但当我们面对H5和小程序双端开发时，往往会遇到令人头疼的兼容性问题。以我最近接手的一个电商项目为例，团队需要实现商品图片上传功能，要求同时支持微信小程序和H5端。最初我们尝试分别开发两套代码，结果发现：

• 小程序端使用wx.chooseImage API，而H5端需要input type="file"
• 图片压缩逻辑在小程序用wx.compressImage，H5则需引入第三方库
• 上传接口在小程序用wx.uploadFile，H5用FormData方式
• 两端的Base64转换方式也存在差异

这种双线作战不仅效率低下，更可怕的是后期维护成本呈指数级增长。直到我们转向UniApp，这些问题才迎刃而解。UniApp的跨端能力让我们可以用一套代码实现多端兼容的图片上传功能，核心优势体现在：

1. 统一API调用：uni.chooseImage、uni.uploadFile等API自动适配各平台
2. 共享业务逻辑：压缩算法、格式转换等核心流程无需重复开发
3. 样式一致性：通过条件编译实现UI的差异化调整
4. 开发效率提升：调试周期缩短60%以上

实际项目中我们发现，即使是看似简单的图片上传，不同平台的表现差异也可能导致严重问题。比如在某个Android机型上，H5端上传2MB以上图片会导致页面卡死，而小程序端却运行正常。通过UniApp的统一处理，这类问题可以集中解决。

2. 基础实现方案与核心API解析

2.1 图片选择与格式处理

UniApp提供了统一的媒体选择API，这是跨端开发的第一道关卡。以下是核心代码示例：

javascript复制// 选择图片
uni.chooseImage({
  count: 3, // 最多可选3张
  sizeType: ['original', 'compressed'], // 可选原图或压缩图
  sourceType: ['album', 'camera'], // 可从相册选或拍照
  success: (res) => {
    this.tempFilePaths = res.tempFilePaths // 临时文件路径数组
    this.processImages(res.tempFilePaths)
  },
  fail: (err) => {
    console.error('选择图片失败', err)
  }
})

这里有几个关键点需要注意：

1. count参数：小程序端有严格限制（通常最多9张），而H5端理论上无限制，但建议统一控制数量
2. sizeType行为差异：
   • 小程序端：compressed会进行默认压缩
   • H5端：部分浏览器可能忽略此参数
3. tempFilePaths：
   • 小程序：返回的是wxfile://临时路径
   • H5：返回的是Blob URL

2.2 图片压缩实现方案

针对不同平台，我们需要采用不同的压缩策略：

javascript复制async compressImage(filePath) {
  // 判断运行环境
  if (process.env.UNI_PLATFORM === 'h5') {
    return await this.compressH5Image(filePath)
  } else {