文件上传完成时的功能

Question

我正在使用 JavaScript 将文件上传到 Firebase 存储。文件上传完成后，我不知道如何做一个功能。我尝试使用.then，但没有奏效。

所以在我有另一种方法之前，我会每隔 10 毫秒检查一次 window.setInterval() 是否上传者的值为 100%

我正在使用此脚本进行检查，直到上传完成：

task.on("state_changed",
  function progress(snapshot) {
    let percentage = (snapshot.bytesTransferred / snapshot.totalBytes) * 100;
    uploader.value = percentage;
    window.setInterval(function () {
      if (uploader.value === 100) {
        // The upload is complete!
        window.alert("Upload complete");
      };
    },10)
  }
);

但是因为我做得很快，我在 Chrome 控制台中收到此错误 276 次：

还有其他方法可以检查我的上传完成时间吗？

（我使用 Firebase 存储来托管我的文件）。

提前致谢！

Answer 1

请注意，除了使用 on() 方法来监控文件上传之外，UploadTask 还提供了一个 then() 方法，该方法返回一个“在上传完成时使用其快照数据解析”的 Promise。

所以，您可以按如下方式使用then()：

    // --- 1. Define your UploadTask
    // You don't show how you do that in your question but it is something like the following, using the put() method

    const file = ....;
    const metadata = {
      contentType: "...."
    };

    const fileRef = storageRef.child(...);
    const uploadTask = fileRef.put(file, metadata); 

    // --- 2. Call the then() method on this UploadTask
    uploadTask
    .then(uploadTaskSnapshot => {
           // The upload is complete!
           window.alert("Upload complete");

          //In addition, if needed you can get a Download URL, as follows
          return uploadTaskSnapshot.ref.getDownloadURL();
    })
    .then(url  => {
          //Do something with this url...
    })
    .catch(err => {...});

Answer 2

哎呀，请不要像这样使用setInterval。充其量它会浪费资源并使您的笔记本电脑风扇对您产生噪音，但更常见的是它会扰乱 Chrome（就像它对您所做的那样），或者更糟的是：您的用户。

要检测何时上传完成，需要在uploadTask.on('state_changed',中添加额外的回调方法：

task.on("state_changed", function(snapshot) {
  let percentage = (snapshot.bytesTransferred / snapshot.totalBytes) * 100;
  uploader.value = percentage;
}), function(error) {
  // Handle unsuccessful uploads
}, function() {
  window.alert("Upload complete");
});

有关详细信息，请参阅 uploading files 上的 Firebase 文档，特别是 Monitoring upload progress 部分。此页面还包含上传数据和处理所有可能结果的完整示例。