React新手求助：如何等待多文件上传至AWS S3完成后再执行后续操作？

我明白你的困惑——虽然加了async关键字，但如果没有正确处理异步操作的等待，函数还是会提前执行完。咱们一步步来解决问题：

问题根源 #

你当前的代码里，uploadFile返回的是一个Promise，但你用了.then()而没有用await来等待它完成。这意味着循环会快速遍历所有文件，发起所有上传请求，但不会等待任何一个请求完成就结束了handleClick函数。而且每个上传的结果只能在各自的.then()回调里访问，外部自然拿不到。

方案1：串行上传（逐个等待完成） #

如果希望文件一个接一个上传，可以在循环里用await等待每个uploadFile完成，同时收集成功上传的key：

const handleClick = async (event) => {
  event.preventDefault();
  const fileList = fileInput.current.files;
  const uploadedKeys = [];
  
  // 循环每个文件，等待当前上传完成再处理下一个
  for (let i = 0; i < fileList.length; i++) {
    const file = fileList[i];
    const newFileName = file.name.replace(/\..+$/, "");
    const ReactS3Client = new S3(config);
    
    try {
      const data = await ReactS3Client.uploadFile(file, newFileName);
      if (data.status === 204) {
        uploadedKeys.push(data.key);
        console.log("上传成功：", data.key);
      } else {
        console.log(`文件 ${file.name} 上传失败`);
      }
    } catch (error) {
      console.error(`文件 ${file.name} 上传出错：`, error);
    }
  }
  
  // 所有上传完成后执行后续操作
  console.log("所有上传完成，成功的keys：", uploadedKeys);
  // 调用另一个API
  await yourOtherApiCall(uploadedKeys);
  // 跳转页面
  navigate("/your-target-page");
};

方案2：并行上传（同时发起所有请求，效率更高） #

如果你的S3允许同时发起多个上传请求，用Promise.all可以让所有文件同时上传，等全部完成后再处理结果，效率更高：

const handleClick = async (event) => {
  event.preventDefault();
  const fileList = fileInput.current.files;
  
  // 生成所有上传请求的Promise数组
  const uploadPromises = Array.from(fileList).map(async (file) => {
    const newFileName = file.name.replace(/\..+$/, "");
    const ReactS3Client = new S3(config);
    
    try {
      const data = await ReactS3Client.uploadFile(file, newFileName);
      if (data.status === 204) {
        return data.key; // 成功则返回key
      }
      return null; // 失败返回null
    } catch (error) {
      console.error(`文件 ${file.name} 上传出错：`, error);
      return null;
    }
  });
  
  // 等待所有上传Promise完成
  const results = await Promise.all(uploadPromises);
  // 过滤掉失败的结果，只保留成功的keys
  const uploadedKeys = results.filter(key => key !== null);
  
  // 后续操作
  console.log("所有上传完成，成功的keys：", uploadedKeys);
  await yourOtherApiCall(uploadedKeys);
  navigate("/your-target-page");
};

关键说明 #

• 用await配合async才能真正等待异步操作完成，这样handleClick函数会一直等到所有上传操作结束后才执行后续的API调用和页面跳转。
• 建议加上try/catch来捕获上传过程中的错误，避免单个文件上传失败导致整个流程中断（如果需要的话，也可以根据需求调整错误处理逻辑）。
• 注意：fileInput.current.files是一个FileList对象，不是数组，所以用Array.from()可以把它转换成数组，方便用map处理。

内容的提问来源于stack exchange，提问作者Ninad Gaikwad