等待多个文件的文件内容

Question

我想读取多个文件的文件内容并将内容作为数组返回。整个过程应该等到收到所有文件内容。我的函数以某种方式仅在将一个文件作为输入时起作用。一旦我输入了多个文件，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);

Answer 1

如果你想混合使用 promise，为什么不使用新的基于 promise 的文件/blob读取方法并将 fileReader 一起搞砸呢？另一种解决方案是：new Response(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

}))))

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

Answer 2

根据问题评论中的讨论，我们发现问题的根源是在读取第一个文件 ( ) 时暂停，await readFileAsync(file)该文件允许来自的 React 输入组件files重新渲染和files就地擦除。