Javascript 等待多个文件的文件内容

我想读取多个文件的文件内容，并将内容作为数组返回
整个过程应该等到收到所有文件内容
我的函数只使用一个文件作为输入
当我在一个文件中输入更多的内容到

getFileContent

时，我只收到第一个文件的结果
有人能给我一个提示我的构造缺少什么吗

interface FileInterface {
  fileName: string;
  fileContent: string | ArrayBuffer | null;
}

async function readFileAsync(file: File): Promise<string | ArrayBuffer | null> {
  return new Promise((resolve, reject) => {
    let fileReader: FileReader = new FileReader();
    fileReader.onload = () => {
      resolve(fileReader.result);
    };
    fileReader.onerror = reject;
    fileReader.readAsArrayBuffer(file);
  });
}

export async function getFileContent(
  files: File[]
): Promise<Array<FileInterface>> {
  const uploadedFiles: FileInterface[] = [];
  for (let file of files) {
    console.log(file.name);
    let fileContent: ArrayBuffer = (await readFileAsync(file)) as ArrayBuffer;
    uploadedFiles.push({ fileName: file.name, fileContent: null });
  }

  return uploadedFiles;
}

// files: File[]
const fileContents: FileInterface[] = await getFileContent(files);

接口文件接口{
文件名：字符串；
fileContent:string | ArrayBuffer | null；
}
异步函数readFileAsync（file:file）：承诺{
返回新承诺（（解决、拒绝）=>{
让fileReader:fileReader=newFileReader（）；
fileReader.onload=（）=>{
解析（fileReader.result）；
};
fileReader.onerror=拒绝；
readAsArrayBuffer（文件）；
});
}
导出异步函数getFileContent(
文件：文件[]
)：承诺{
const uploadedFiles:FileInterface[]=[]；
for（让文件中的文件）{
console.log（文件名）；
让fileContent:ArrayBuffer=（等待readFileAsync（文件））作为ArrayBuffer；
push（{fileName:file.name，fileContent:null}）；
}
返回上传的文件；
}
//文件：文件[]
const fileContents:FileInterface[]=等待getFileContent（文件）；

根据问题评论中的讨论，我们发现问题的根源在于读取第一个文件时的暂停（

等待readFileAsync（file）

）这使得

文件

来自的React输入组件能够重新加载并将

文件

擦除到位。

根据问题注释中的讨论，我们发现问题的根源是读取第一个文件时的暂停（

等待readFileAsync（file）

）这使得

文件

来自的React输入组件可以重新加载并将

文件

擦除到位。

如果您想混合承诺，为什么不使用新的基于承诺的文件/blob并将文件读取器拧在一起？另一个解决方案是：

newresponse（file）.arrayBuffer（）

---

…如果没有必要的话，我就不会把所有这些文件都读入内存。。。如果是为了上传，那么我只需要将它们添加到FormData中。

如果你想混合承诺，为什么不使用新的基于承诺的文件/blob并将文件读取器拧在一起？另一个解决方案是：

newresponse（file）.arrayBuffer（）

---

…如果没有必要的话，我就不会把所有这些文件都读入内存。。。如果是为了上传，我会把它们添加到FormData中。

你能看到所有文件的文件名吗？使用

console.log（file.name）

？是的，但始终只有一个名称。如果文件只是一个文件的数组，请尝试打印files.length。这不是问题所在。只要我把行

注释掉，就让fileContent:ArrayBuffer=（等待readFileAsync（file））作为ArrayBuffer我看到了所有文件名。在等待暂停期间，它可能在其他地方被修改，因为在未中断时，文件是完整的。您能看到所有文件的文件名吗？使用
console.log（file.name）
？是的，但始终只有一个名称。如果文件只是一个文件的数组，请尝试打印files.length。这不是问题所在。只要我把行
注释掉，就让fileContent:ArrayBuffer=（等待readFileAsync（file））作为ArrayBuffer我看到了所有的文件名。它可能在等待暂停期间的其他地方被修改，因为当它没有被中断时，文件是完整的。
// Simulate files you would get from input[type=file]
files = [
  new File(['a'], 'a.txt'),
  new File(['b'], 'b.txt')
]

const fileContents = await Promise.all(files.map(file => file.arrayBuffer().then(buf => ({
  fileContent: buf,
  fileName: file.name
}))))