等待多个文件的文件内容

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就地擦除。