等待多个文件的文件内容

Question

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

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

Answer 2

如果你想混入 promise，为什么不使用基于 file/blob reading methods 的新 promise 并将 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 中。

等待多个文件的文件内容

Wait for file content of multiple files

javascript

filereader

promise

async-await

typescript