如何将包含文件及对应base64格式的对象推入数组？

问题原因 #

你代码的问题出在异步遍历逻辑上：Array.prototype.forEach 不支持等待异步回调执行完成，你在forEach的回调里加了async/await，但forEach本身不会等待所有异步任务结束，就会直接执行后续的console.log("data", arr)，此时所有getBase64的转换操作还没返回结果，数组自然是空的。

解决方法 #

将forEach遍历替换为map生成Promise数组，再用Promise.all等待所有异步任务执行完成，就能直接拿到完整的包含文件和对应base64的结果数组，不需要手动push元素。

修改后的handleUploadChange代码如下：

// 给函数加上async修饰，才能在内部使用await
const handleUploadChange = async (info) => {
  if (info.file.status === "error") {
    console.log("error", info.file);
  }

  if (info.file.status === "done") {
    // 用map生成每个文件异步处理的Promise数组
    const promiseArr = info.fileList.map(async (file) => {
      const fileInfo = await getBase64(file.originFileObj);
      return { base64: fileInfo, fileObj: file };
    });
    // 等待所有Promise执行完成，直接拿到最终结果数组
    const arr = await Promise.all(promiseArr);
    console.log("data", arr);
    // 后续可以直接使用arr进行状态存储、传递给父组件等操作
  }
};

额外说明 #

如果需要兼容单个文件base64转换失败的场景，可以把Promise.all替换为Promise.allSettled，再自行过滤出转换成功的结果即可。

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