uniapp 多文件上传的实现方法

在uniapp中如何实现多文件上传功能？需要支持一次选择多个文件，并能显示上传进度。目前使用的uni.uploadFile只能单文件上传，有没有更好的解决方案或插件推荐？最好能兼容H5和小程序平台。

2 回复

使用uni.uploadFile方法，循环调用即可。可配合uni.chooseImage选择多张图片，然后遍历文件数组逐个上传。注意控制并发数量，避免请求过多。


在 UniApp 中实现多文件上传，可以通过以下步骤完成，结合 uni.chooseImage 选择文件和 uni.uploadFile 上传文件：

实现步骤：

  1. 选择文件：使用 uni.chooseImage 选择多个文件。
  2. 逐个上传：遍历文件列表，通过 uni.uploadFile 逐个上传。
  3. 处理结果：汇总上传结果（成功/失败）。

示例代码：

// 选择并上传多个文件
uploadMultipleFiles() {
  // 1. 选择文件
  uni.chooseImage({
    count: 5, // 最多选择5个文件
    success: (res) => {
      const tempFilePaths = res.tempFilePaths; // 获取临时文件路径数组
      const uploadTasks = [];
      
      // 2. 遍历文件路径，逐个上传
      tempFilePaths.forEach((filePath, index) => {
        const task = new Promise((resolve, reject) => {
          uni.uploadFile({
            url: 'https://your-upload-api.com/upload', // 替换为你的上传接口
            filePath: filePath,
            name: 'file', // 后端接收的文件字段名
            formData: {
              'userId': '123' // 附加数据
            },
            success: (uploadRes) => {
              console.log(`文件${index + 1}上传成功:`, uploadRes.data);
              resolve(uploadRes.data);
            },
            fail: (error) => {
              console.error(`文件${index + 1}上传失败:`, error);
              reject(error);
            }
          });
        });
        uploadTasks.push(task);
      });

      // 3. 处理所有上传结果
      Promise.all(uploadTasks)
        .then(results => {
          uni.showToast({ title: '所有文件上传成功', icon: 'success' });
          console.log('全部上传结果:', results);
        })
        .catch(err => {
          uni.showToast({ title: '部分文件上传失败', icon: 'none' });
        });
    },
    fail: (error) => {
      uni.showToast({ title: '选择文件失败', icon: 'none' });
    }
  });
}

关键说明：

  • 文件限制：count 参数控制最多选择的文件数量（微信小程序最多9个）。
  • 上传并发：使用 Promise.all 确保所有文件上传完成后再处理结果，避免界面卡顿。
  • 服务器兼容：确保后端接口支持多文件上传（通常逐个处理）。
  • 格式支持：常见图片格式（jpg、png等），部分平台支持视频。

注意事项：

  • 临时路径有效期：小程序中临时路径仅在一次启动周期内有效。
  • 网络请求超时：可在 uni.uploadFile 中设置 timeout（默认60秒）。
  • 安全限制：部分平台（如小程序）要求域名备案且配置合法。

根据实际需求调整参数（如接口URL、表单数据）。

回到顶部