JavaScript 中 FileReader 的异步/等待问题

我在 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));
}

这是所需的执行顺序（具有两个文件的示例）：

1. （等待3秒）
2. THEN 块（文件 1）
3. （等待3秒）
4. 然后阻止（文件 2）
5. 完全的

但这是实际的执行顺序：

1. 完全的
2. （等待3秒）
3. 然后阻止
4. 然后阻止

“THEN 块”在超时后正确执行，但执行中的代码for循环继续而不等待执行onload功能。

如何使阅读器异步？我尝试了很多解决方案（例如将for循环一个承诺并把resolve()内部功能.then()）但它们都不起作用。

我建议“承诺” Reader 的事情，然后使用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;
};