时间戳

首页 > 解决方案 > 多个文件上传后firebase存储执行代码

javascript - 多个文件上传后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);
    })
}

标签： javascriptfirebaseasync-awaitfirebase-storage

解决方案

该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()

推荐阅读