更新记录

1（2025-02-24） 下载此版本

新增方法

平台兼容性

uni-app

# 图片选择与上传插件使用文档

## 功能概述
本插件提供一体化图片选择与上传解决方案，包含以下核心功能：
- 📱 多端兼容（支持微信小程序、H5、APP等uni-app平台）
- 🖼️ 本地图片选择（相册/拍照）
- 🚀 并行图片上传
- 👀 本地预览支持
- 🔒 自动携带Token验证
- 📊 批量上传结果反馈

---

## 安装方式

### 直接引入
```javascript
// 在需要使用的地方引入
import { chooseAndUploadImage } from '@/utils/image-uploader.js'

基础用法

最小化示例

chooseAndUploadImage({
  uploadUrl: '/api/upload'
}).then(results => {
  console.log('上传结果：', results)
})

完整功能示例

try {
  const results = await chooseAndUploadImage({
    count: 3,
    preview: true,
    uploadUrl: '/api/upload',
    formData: {
      category: 'avatar',
      userId: 123
    }
  })

  const successFiles = results.filter(item => item.success)
  console.log('成功上传文件：', successFiles)
} catch (err) {
  uni.showToast('图片上传失败，请重试')
}

配置参数说明

返回结果结构

单个文件上传结果

{
  success: Boolean, // 上传是否成功
  data: Object,     // 成功时服务器响应数据
  error: any        // 失败时错误信息
}

批量上传示例

[
  {success: true, data: {url: 'https://example.com/1.jpg'}},
  {success: false, error: {message: '文件过大'}}
]

高级功能

自定义请求头

修改uploadFile方法：

header: {
  'X-Access-Token': uni.getStorageSync('token'),
  'Custom-Header': 'your-value' // 添加自定义请求头
}

文件类型过滤（H5端）

uni.chooseImage({
  count,
  sizeType: ['compressed'],
  sourceType: ['album', 'camera'],
  // 添加H5端文件类型过滤
  extension: ['png', 'jpg'] 
})

注意事项

平台差异处理

1. 文件数量限制：

   • 微信小程序最多允许9张
   • H5端无限制（但受浏览器限制）

2. 预览功能：

   • APP端预览需要原生支持
   • 部分安卓机可能存在预览缩放问题

性能优化建议

// 在循环上传时建议添加进度提示
uni.showLoading({
  title: `上传中 (${current}/${total})`,
  mask: true
})

错误处理方案

常见错误码

异常捕获示例

chooseAndUploadImage({/*...*/})
  .then(handleSuccess)
  .catch(err => {
    if(err.errMsg.includes('cancel')) {
      console.log('用户取消选择')
    } else {
      uni.showModal({
        title: '上传失败',
        content: err.message
      })
    }
  })

版本更新日志

v1.1.0 (2023-08-20)

• 新增自动Token注入机制
• 优化多图上传并发处理
• 修复H5端预览异常问题

v1.0.0 (2023-07-15)

• 实现基础图片选择与上传功能
• 支持本地图片预览
• 提供完整结果回调