使用 FileReader 和 Promise 得到空结果

Question

我在使用 FileReader 进行异步操作和 Promises（对我来说是一个相当新的概念）方面遇到了一些困难。我在那里发现了一个非常有趣的线程，但尽管内容很丰富，但无法使我的脚本正常工作。

我有一个接受多个文件的文件输入，我想读取这些文件并将它们的内容推送到数组中。但我似乎不太理解承诺是如何工作的，因为最后我仍然得到一个空数组。

const inputElement = document.getElementById("trackfiles");
inputElement.addEventListener("change", (e) => {
  const selectedFiles = inputElement.files;

  let p = Promise.resolve();
  for (const file of selectedFiles) {
    p = p.then(() =>
      readAsData(file).then((content) => {
        files_content.push(content);
      }),
    );
  }

  console.log(files_content);
});

function readAsData(file) {
  return new Promise((resolve, reject) => {
    let reader = new FileReader();
    reader.readAsText(file);
    reader.onload = () => {
      resolve(reader.result);
    };
    reader.onerror = reject;
  });
}

当我选择文件时，我得到一个空数组：

谢谢您的帮助

Answer 1

您正在异步

then

回调执行之前打印数组。

在打印数组之前，您需要等待承诺的解决。

所以替换这个：

  console.log(files_content);

这样：

  p.then(() => console.log(files_content));

与您的问题无关，但您不必等到读完一个文件才开始阅读下一个文件。您可以立即为所有选定的文件调用

readAsData

，然后等待您通过

Promise.all

返回的所有承诺。

其次，当您使用

async

/

await

语法时，事情可能看起来更清晰：

inputElement.addEventListener("change", async (e) => {
  const files_content = await Promise.all(Array.from(inputElement.files, readAsData));
  console.log(files_content);
});