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

问题描述

在所有文件上传到 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);
    })
}

解决方法

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()
        })
      });
    }
  );
}

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

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

,

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

[15,20,25,15,25]