如何解决从Promise获取Blob并添加到数组的问题？

问题根源 #

pathToBlob是异步函数，调用后返回的是Promise对象，而非直接的File/Blob。你直接把Promise解构进blobs数组会导致错误；只有通过await等待Promise状态变为fulfilled，才能拿到实际的File对象。

方案1：在for...of循环中逐个等待异步结果 #

把外层逻辑改成异步函数，在循环内用await获取每个路径对应的File，再push到数组：

// 确保外层函数为async，比如组件事件处理函数或异步初始化函数
const convertImagesToBlobs = async () => {
  let blobs: File[] = [];
  if (vehicle.images) {
    for (let i of vehicle.images) {
      const fullUrl = `${process.env.REACT_APP_API_URL}${i.img}`;
      // 等待Promise完成，拿到实际的File对象
      const file = await pathToBlob(fullUrl);
      blobs.push(file);
    }
    console.log(blobs); // 此处为正确的File数组
  }
};

方案2：用Promise.all批量处理（更高效） #

如果图片数量较多，用Promise.all并行发起请求，一次性获取所有结果，效率优于逐个等待：

const convertImagesToBlobs = async () => {
  if (!vehicle.images) return [];
  
  // 生成所有异步请求的Promise数组
  const blobPromises = vehicle.images.map(i => {
    const fullUrl = `${process.env.REACT_APP_API_URL}${i.img}`;
    return pathToBlob(fullUrl);
  });
  
  // 等待所有Promise完成，直接得到File数组
  const blobs: File[] = await Promise.all(blobPromises);
  console.log(blobs);
  return blobs;
};

优化pathToBlob函数（可选） #

原函数文件名固定为fileNameGoesHere，可从URL提取原始文件名，让结果更合理：

const pathToBlob = async (url: string) => {
  const response = await fetch(url);
  const blobFile = await response.blob();
  // 从URL中提取文件名
  const fileName = url.split('/').pop() || 'image.png';
  return new File([blobFile], fileName, { type: blobFile.type });
};

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