Функция, когда загрузка файла завершена

Question

Я использую JavaScript для загрузки файла в Firebase Storage. Я не знаю, как сделать функцию, когда загрузка файла завершена. Я пытался использовать .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 Storage для моего файлового хостинга).

Заранее спасибо!

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

Yikes, пожалуйста, не используйте setInterval как этот. В лучшем случае это приводит к бесполезному расходу ресурсов и делает ваш вентилятор вентилятора go слишком шумным для вас, но чаще всего он расстроит 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");
});

Подробнее об этом смотрите документацию Firebase по загрузке файлов , в частности, раздел по Отслеживание хода загрузки . Эта страница также содержит полный пример загрузки данных и обработки всех возможных результатов.