时间戳

首页 > 解决方案 > 等待多个文件的文件内容

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);

标签： javascripttypescriptpromiseasync-awaitfilereader

解决方案

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

推荐阅读