等待多个文件的文件内容答案

【问题标题】：Wait for file content of multiple files等待多个文件的文件内容
【发布时间】：2020-10-07 21:22:23
【问题描述】：

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

【问题讨论】：

你能看到所有文件的文件名吗？使用你的console.log(file.name)?
是的，但一直只有一个名字。
那么可能是files只是一个文件的数组，尝试打印files.length
这不是问题。只要我注释掉 let fileContent: ArrayBuffer = (await readFileAsync(file)) as ArrayBuffer; 行，我就会看到所有文件名。
有可能在await挂起期间在别处被修改过，因为在没有中断的情况下文件是完整的。

标签： javascript typescript promise async-await filereader

【解决方案1】：

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

【讨论】：

【解决方案2】：

如果你想混合 Promise，为什么不使用新的基于 Promise 的文件/blob reading methods 和 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 中。

【讨论】：