javascript - JavaScript 中 FileReader 的异步/等待问题

Question

我在 Vue.js 项目中使用 FileReader，但这段代码有问题:

async uploadDocuments(files) {
    for (let file of files) {
        let fileName = file.name;
        let fileContent;
        let reader = new FileReader();
        reader.onload = async () => {
            fileContent = reader.result;
            await this.submitFile(fileContent, fileName, fileType)
                .then(/* THEN block */)
                .catch(/* CATCH block */);
        };
        reader.onerror = (error) => { console.warn(error); };
        reader.readAsDataURL(file);
    }
    console.log("COMPLETED");
}

async submitFile(fileContent, fileName, fileType) {
    // this function should handle the file upload and currently contains a timeout
    await new Promise((resolve) => setTimeout(resolve, 3000));
}

这是所需的执行顺序(有两个文件的示例):

(等待 3 秒)

THEN block (文件 1)

(等待 3 秒)

THEN block (文件 2)

已完成

但这是实际的执行顺序:

已完成

(等待 3 秒)

然后阻止

然后阻止

“THEN block ”在超时后正确执行，但执行 for 中的代码循环继续，不等待 onload 的执行。功能。
如何使阅读器异步？我尝试了许多解决方案(例如将 for 循环包装在一个 promise 中并将 resolve() 函数放入 .then() 中)，但它们都不起作用。

Answer 1

我建议“ promise ”阅读器，然后使用 Promise.all直到所有文件上传完毕。

uploadDocuments = async (event, files) => {
  const filePromises = files.map((file) => {
    // Return a promise per file
    return new Promise((resolve, reject) => {
      const reader = new FileReader();
      reader.onload = async () => {
        try {
          const response = await this.submitFile(
            reader.result,
            file.name,
            fileType
          );
          // Resolve the promise with the response value
          resolve(response);
        } catch (err) {
          reject(err);
        }
      };
      reader.onerror = (error) => {
        reject(error);
      };
      reader.readAsDataURL(file);
    });
  });

  // Wait for all promises to be resolved
  const fileInfos = await Promise.all(filePromises);

  console.log('COMPLETED');

  // Profit
  return fileInfos;
};