如何将Promise数组（源自File数组）转换为字符串值数组？

你当前的问题核心在于：map结合async函数处理数组时，返回的是Promise数组，而非直接的结果数组——因为async函数本身就会返回一个Promise，哪怕你在内部用了await，map的每一项依然是Promise，嵌套再多的map(async ...)也还是Promise数组。

正确解决方案：使用Promise.all() #

Promise.all()专门用来处理Promise数组，它会等待所有Promise完成后，返回一个包含所有结果的数组。改造你的getFullValue函数如下：

// 完整类型声明版本
const getFullValue = async (files: File[]): Promise<(string | ArrayBuffer | null)[]> => {
  // 先为每个File生成转换Promise
  const conversionPromises = files.map(file => customConvertFileToBase64String(file));
  // 等待所有Promise完成，得到结果数组
  return Promise.all(conversionPromises);
};

// 简洁版本
const getFullValue = async (files: File[]) => 
  Promise.all(files.map(customConvertFileToBase64String));

如何使用这个函数 #

因为getFullValue是异步函数，调用时需要用await（需在async函数内）或.then()：

// 场景1：在async函数中使用await
async function processFiles(files: File[]) {
  try {
    const base64Results = await getFullValue(files);
    // 这里可以直接使用base64Results（类型是(string | ArrayBuffer | null)[]）
    console.log(base64Results);
  } catch (error) {
    // 处理转换失败的情况（比如某个File读取出错）
    console.error('文件转换失败:', error);
  }
}

// 场景2：用.then()链式调用
getFullValue(yourFileArray)
  .then(base64Results => {
    console.log(base64Results);
  })
  .catch(error => {
    console.error('文件转换失败:', error);
  });

处理部分失败的情况（可选） #

如果希望某个文件转换失败时，不影响其他文件的结果，可以用Promise.allSettled()替代Promise.all()，它会返回所有Promise的状态（成功/失败），你可以过滤出成功的结果：

const getFullValue = async (files: File[]): Promise<(string | ArrayBuffer | null)[]> => {
  const settledResults = await Promise.allSettled(
    files.map(file => customConvertFileToBase64String(file))
  );
  
  // 过滤出成功的结果
  return settledResults
    .filter(result => result.status === 'fulfilled')
    .map(result => (result as PromiseFulfilledResult<string | ArrayBuffer | null>).value);
};

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