uniapp 多文件上传结果不同步如何解决？

在uniapp中实现多文件上传时，上传完成后返回的结果顺序与实际文件选择顺序不一致，导致无法正确匹配上传状态。尝试使用Promise.all但仍有部分文件回调延迟，且iOS和安卓表现不同。请问该如何确保多文件上传结果的顺序与原始文件列表严格对应？目前使用的uni.uploadFile接口是否支持同步控制？

2 回复

使用Promise.all或async/await同步处理上传结果。将多个文件上传封装成Promise数组，统一处理返回结果。


在UniApp中，多文件上传结果不同步通常是由于异步操作导致的，因为每个文件上传都是独立的异步请求，可能导致回调顺序混乱。以下是解决方案：

  1. 使用Promise.all()同步处理
    将所有上传操作封装为Promise，通过Promise.all()等待所有文件上传完成，再统一处理结果。

    async function uploadFiles(files) {
  const uploadPromises = files.map(file => {
    return new Promise((resolve, reject) => {
      uni.uploadFile({
        url: 'https://example.com/upload',
        filePath: file.path,
        name: 'file',
        success: (res) => resolve(res.data),
        fail: (err) => reject(err)
      });
    });
  });
  
  try {
    const results = await Promise.all(uploadPromises);
    console.log('所有文件上传成功:', results);
    // 处理统一结果
  } catch (error) {
    console.error('部分文件上传失败:', error);
  }
}

  2. 计数器控制
    通过计数器跟踪上传完成数量，确保所有请求完成后触发回调。

    function uploadFiles(files, callback) {
  let completed = 0;
  const results = [];
  
  files.forEach((file, index) => {
    uni.uploadFile({
      url: 'https://example.com/upload',
      filePath: file.path,
      name: 'file',
      success: (res) => {
        results[index] = { success: true, data: res.data };
      },
      fail: (err) => {
        results[index] = { success: false, error: err };
      },
      complete: () => {
        completed++;
        if (completed === files.length) {
          callback(results);
        }
      }
    });
  });
}

关键点：

  • 使用异步同步化方法（如Promise）或计数器确保所有上传完成后再处理。
  • 根据业务需求选择全部成功或容忍部分失败的处理逻辑。
  • 注意错误处理，避免单个失败影响整体流程。

根据项目环境选择合适方案，推荐使用Promise.all()，代码更简洁易维护。

回到顶部