Firebase Storage Upload的动态进度栏

问题描述

我的问题是我无法直接从 firebasePutString 获取 firebase.storage.UploadTaskSnapshot.bytesTransferred ，但需要使用 .on("state_changed)方法，但是此方法仅每隔几秒钟(每256Kb)被调用一次，因此进度条并不是真正动态的.我不知道如何从我的 firebasePutString 对象直接调用它.有什么想法吗?

My problem is that I can't get firebase.storage.UploadTaskSnapshot.bytesTransferred directly from firebasePutString, but need to use the .on("state_changed") method, but this method is called only every few seconds (every 256Kb), so the progress bar isn't really dynamic. I can't figure out how to call it directly from my firebasePutString object. Any ideas??

let firebasePutString = firebase.storage().ref(`/${UID}/${fileName}`).putString(data, 'data_url');
firebasePutString.on('state_changed',
function progress(snapshot) {
  console.log("snapshot: " + snapshot);
  this.percentage = (snapshot.bytesTransferred / snapshot.totalBytes) * 100;
  console.log("percentage2: " + this.percentage);
},
function error(err) {},
function complete() {});

推荐答案

这是我的解决方案的代码，虽然不是最优雅的，但是效果很好:

Here's the code of my solution, not the most elegant, but works fairly well:

让临时:数字= 0；让firebaseRef = firebase.storage().ref(/path/);让firebasePutString = firebaseRef.putString(data，'data_url');

let interim: number = 0; let firebaseRef = firebase.storage().ref(/path/); let firebasePutString = firebaseRef.putString(data, 'data_url');

let mySubscription = Observable.interval(50).subscribe( _ => {
    if (firebasePutString.snapshot.totalBytes === firebasePutString.snapshot.bytesTransferred) {
      interim = firebasePutString.snapshot.bytesTransferred;
      this.percentage = parseInt(((interim / firebasePutString.snapshot.totalBytes) * 100).toFixed(0));
      mySubscription.unsubscribe();
    }
    else if (interim === 0 && firebasePutString.snapshot.bytesTransferred === 0 && this.percentage < 100) {
      this.percentage = this.percentage + 1;
    }
    else if (interim === 0 && firebasePutString.snapshot.bytesTransferred !== 0) {
      interim = firebasePutString.snapshot.bytesTransferred;
      (this.percentage < parseInt(((interim / firebasePutString.snapshot.totalBytes) * 100).toFixed(0))) ? this.percentage = parseInt(((interim / firebasePutString.snapshot.totalBytes) * 100).toFixed(0)) : (this.percentage = this.percentage);
    }
    else if(interim === firebasePutString.snapshot.bytesTransferred && this.percentage < 100) {
      this.percentage = this.percentage + 1;
    }
    else {
      interim = firebasePutString.snapshot.bytesTransferred;
      (this.percentage < parseInt(((interim / firebasePutString.snapshot.totalBytes) * 100).toFixed(0))) ? this.percentage = parseInt(((interim / firebasePutString.snapshot.totalBytes) * 100).toFixed(0)) : (this.percentage = this.percentage);
    }
  });

这篇关于Firebase Storage Upload的动态进度栏的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！