uniapp多文件上传的实现方法

在uniapp中如何实现多文件上传功能？需要支持同时选择多个文件并上传到服务器，最好能显示上传进度和结果。求具体实现方法和代码示例，包括前端选择文件和后端接收的处理逻辑。目前遇到的问题是只能单文件上传，不清楚如何改造为多文件上传方案。

2 回复

uniapp多文件上传可使用uni.uploadFile()循环调用，或使用uni.chooseImage选择多张图片后批量上传。注意设置filePath和formData，支持Promise封装处理异步流程。


在 UniApp 中实现多文件上传，可以通过 uni.uploadFile API 结合 uni.chooseImage 或 uni.chooseFile 方法来完成。以下是具体实现步骤和示例代码：

实现步骤

  1. 选择文件：使用 uni.chooseImage（图片）或 uni.chooseFile（通用文件）选择多个文件。
  2. 遍历上传：循环文件列表，逐个调用 uni.uploadFile 上传。
  3. 处理结果：通过 Promise 或回调函数管理上传进度和结果。

示例代码

// 选择并上传多个文件
async function uploadMultipleFiles() {
  try {
    // 1. 选择文件（这里以图片为例）
    const res = await uni.chooseImage({
      count: 5, // 最多选择5个文件
      sizeType: ['compressed'], // 可指定压缩图
      sourceType: ['album', 'camera'] // 相册或相机
    });
    
    const files = res.tempFilePaths; // 获取临时文件路径列表
    const uploadTasks = [];
    
    // 2. 遍历文件列表，创建上传任务
    for (let i = 0; i < files.length; i++) {
      const task = uni.uploadFile({
        url: 'https://example.com/upload', // 替换为你的上传接口
        filePath: files[i],
        name: 'file', // 后端接收的文件字段名
        formData: {
          'userId': '123' // 其他表单数据
        },
        success: (uploadRes) => {
          console.log(`文件 ${i + 1} 上传成功`, JSON.parse(uploadRes.data));
        },
        fail: (err) => {
          console.error(`文件 ${i + 1} 上传失败`, err);
        }
      });
      uploadTasks.push(task);
    }
    
    // 3. 等待所有上传任务完成
    await Promise.all(uploadTasks);
    uni.showToast({ title: '所有文件上传完成', icon: 'success' });
    
  } catch (error) {
    console.error('上传过程出错:', error);
    uni.showToast({ title: '上传失败', icon: 'none' });
  }
}

注意事项

  • 文件类型：uni.chooseImage 适用于图片，uni.chooseFile 支持更多文件类型（如文档、视频）。
  • 并发限制：同时上传多个文件可能受限于设备和服务器，建议控制并发数量（如使用循环 + await 逐次上传）。
  • 进度显示：可通过 onProgressUpdate 监听上传进度，实现进度条（代码未展示，需自行添加）。
  • 服务器兼容：确保后端接口支持多文件接收（通常为循环处理 file 字段）。

如果需要更完整的实现（如进度条、取消上传），可以结合 uni.uploadTask 对象进行扩展。

回到顶部