多个文件上传后firebase存储执行代码答案

【问题标题】：firebase storage execute code after multiple file upload多个文件上传后firebase存储执行代码
【发布时间】：2021-04-27 19:48:57
【问题描述】：

在所有文件上传到 Firebase 存储后，我正尝试重定向到另一个页面。它在完成上传之前继续执行重定向代码。无法弄清楚如何一个接一个地执行。这是一个运行在网站客户端的js脚本。

if (file[0].files[0]) {
  uploadFile(file[0]);
}
if (file[1].files[0]) {
  uploadFile(file[1]);
}
if (file[2].files[0]) {
  uploadFile(file[2]);
}

console.log("All files finished");
window.location.href = "success.html";

function uploadFile(file) {
  var task = storage.ref("arts/" + emailValue + Date.now()).put(file.files[0]);

  task.on('state_changed',

    function progess(snapshot) {
      var progressValue = (snapshot.bytesTransferred / snapshot.totalBytes) * 100;
      console.log(progressValue);
    },
    function error(err) {
      console.log(err);
    },
    function completed() {
      console.log('file upload success');
      task.snapshot.ref.getDownloadURL().then(function(downloadURL) {
        imgUrl = downloadURL;
        storeDetails();
      });

    }

  );
}

function storeDetails() {

  db.collection("participants").doc(emailValue + Date.now()).set({
      email: emailValue,
      url: imgUrl.toString(),
    })
    .then(function() {
      console.log("Document successfully written!");

    })
    .catch(function(error) {
      console.error("Error writing document: ", error);
    })
}

【问题讨论】：

您在这里没有异步等待，因此您将尝试上传并立即重定向。为什么标记 async await 我实际上并没有使用它，即使您的代码确实需要它？
我尝试使用 async 和 await 但对我不起作用不知道如何在我的场景中实现它。
有一个look 例如stackoverflow.com/questions/61676984/…
我尝试更改代码不起作用（使上传功能异步并在task.on中等待）

标签： javascript firebase async-await firebase-storage

【解决方案1】：

put 方法返回一个 Promise，因此您可以等待它解决而不是传入回调。这样做时，上传文件然后将其下载 URL 存储在数据库中的代码变为：

function uploadFile(file) {
  const filename = emailValue + Date.now();
  storage.ref("arts/" + filename).put(file.files[0]).then(() => {
      task.snapshot.ref.getDownloadURL().then((downloadURL) => {
        db.collection("participants").doc(emailfilename).set({
          email: emailValue,
          url: downloadURL.toString()
        })
      });
    }
  );
}

请注意，上面的代码有一些细微的变化，所以：

可能有语法错误，因为我没有运行它，所以把它当作伪代码。如果您遇到错误，请先尝试自己解决它 - 如果您这样做了，请发表评论或编辑带有修复程序的答案。
如果您还需要进度报告，可以收听state_changed。只需忽略上面代码中的then() 处理的completed 事件。

【讨论】：

感谢您的回复。这不是我正在尝试的我正在尝试使用我的 uploadFile 函数一个接一个地上传多个文件
您的回答让我想到了解决问题的方法。这是一个有点凌乱的代码，但有效。谢啦。我从 uploadFile 函数返回了一个承诺，然后创建了一个嵌套的 then 直到所有 3 个文件都完成。
编辑多一点而不是嵌套然后我让那些uploadFile函数等待它的更干净的代码
我肯定会这样做的。我不能投票，我的排名很低。
您应该仍然能够接受答案，这与您的声誉无关。

【解决方案2】：

从uploadFile 和storeDetail 函数返回一个promise，然后使提交函数异步并等待uploadFile 函数调用，以完成。

submitButton.addEventListener("click", async function () {

        if (file[0].files[0]) {
            await uploadFile(file[0], progressBar[0]);
        }
        if (file[1].files[0]) {
            await uploadFile(file[1], progressBar[1]);
        }
        if (file[2].files[0]) {
            await uploadFile(file[2], progressBar[2]);
        }

        console.log("All files finished");
    }
})

    function storeDetails() {
    return new Promise((resolve, _reject) => {
        db.collection("participants").doc(emailValue + Date.now()).set({
            email: emailValue,
            url: imgUrl.toString(),
        })
            .then(function () {
                console.log("Document successfully written!");
                resolve("success")              
            })
            .catch(function (error) {
                console.error("Error writing document: ", error);
            })
    });
}

function uploadFile(file, progressBar) {
    return new Promise((resolve, _reject) => {
        var task = storage.ref("arts/" + emailValue + Date.now()).put(file.files[0]);

        task.on('state_changed',

            function progess(snapshot) {
                var progressValue = (snapshot.bytesTransferred / snapshot.totalBytes) * 100;
                console.log(progressValue);
                progressBar.style.width = progressValue + '%';
            },
            function error(err) {
                console.log(err);
            },
            function completed() {
                console.log('file upload success');
                task.snapshot.ref.getDownloadURL().then(async function (downloadURL) {
                    imgUrl = downloadURL;
                    await storeDetails();
                    resolve("Completed");
                });
                
            }

        );
    });
}

【讨论】：