javascript - 如何在 google-apps-script Web 应用程序的 for 循环函数中将 async/await 与 FileReader 一起使用？

Question

我创建了一个 Google Apps 脚本 Web 应用程序，用于将图像上传到我的 Google 云端硬盘。它有很多行，每行都有一个用于上传文件的输入标签。我创建了一个只有一个提交按钮来一次性上传所有选定的图像。但是，我希望每一行按顺序上传每个图像，然后在按顺序成功上传时删除该行。问题是我找不到使用 async/await 函数通过 FileReader 将图像上传到 Drive 的正确方法，因为当我运行脚本时，它仍然作为异步函数工作。

async function uploadImage() {
    var row   = document.getElementsByClassName('row');
    var file  = document.getElementsByClassName('img-file');
    var name  = document.getElementsByClassName('img-name');

    for (let i=0; i<row.length; i++) {
      var image = file[i].files[0];
      if (image) {
        var reader = new FileReader();
        reader.readAsDataURL(image);
        reader.onloadend = async (event) => { 
            await new Promise((resolve, reject) => { 
                google.script.run.withSuccessHandler(r => resolve())
                                 .uploadImgToDrive(name[i].value, event.target.result) 
            }).then(() => row[i].innerHTML='');
        }        
      }
    }    
}

Answer 1

如果我明白你的目标是什么，下面的代码应该可以工作。一次只会上传一张图像。让我知道它是否符合您的需求。

请注意，您的函数始终是异步的，因为其中有两个异步任务(FileReader 和 API 调用)。您唯一可以决定的是要“同时”处理多少个操作。

最后，请记住，只要您使用 async 函数，它就会立即返回一个未解析的 Promise，该 Promise 将使用该函数完成运行时返回的值进行解析。

在async函数中，await用于在继续之前“等待” promise 解决(在本例中，您使用创建的 promise new Promise())，所以它类似于直接在 Promise 上使用 .then() (你不需要两者，这就是为什么我删除了 .then () 部分)。

function uploadImages() {

    var row   = document.getElementsByClassName('row');
    var file  = document.getElementsByClassName('img-file');
    var name  = document.getElementsByClassName('img-name');

    (function nextImg(i) {
        var image = file[i].files[0];
        if (image) {
            var reader = new FileReader();
            reader.readAsDataURL(image);
            reader.onloadend = async (event) => {
                await new Promise((resolve, reject) => {
                    google.script.run.withSuccessHandler(r => resolve())
                        .uploadImgToDrive(name[i].value, event.target.result);
                });
                row[i].innerHTML='';
                if (i < row.length - 1) {
                  nextImg(i + 1);
                }
            };
        }
    })(0);

}

优化版本(未测试):

避免使用 innerHTML (重要)并尝试重用 FileReader() 实例(不确定它是否有效)。

function uploadImages() {

    let row   = document.getElementsByClassName('row');
    let file  = document.getElementsByClassName('img-file');
    let name  = document.getElementsByClassName('img-name');

    let reader = new FileReader();

    (function nextImg(i) {
        if (file[i].files[0]) {
            reader.onloadend = async function onloadend(e) {
                await new Promise((resolve) => {
                    google.script.run.withSuccessHandler(r => resolve(r)).uploadImgToDrive(name[i].value, e.target.result);
                });
                while (row[i].firstChild) {
                    row[i].removeChild(row[i].firstChild);
                }
                if (i < row.length - 1) {
                    nextImg(i + 1);
                }
            };
            reader.readAsDataURL(file[i].files[0]);
        }
    })(0);

}