Firebase 存储上传的动态进度条

Question

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

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

Answer 1

Firebase Storage SDK 仅以 256KB 的增量报告进度。除非您自己想出一些衡量进度的低级方法，否则这已经很好了。

Answer 2

这是我的解决方案的代码，不是最优雅的，但工作得相当好：

让临时：数字= 0；让 firebaseRef = firebase.storage().ref(/path/); 让 firebasePutString = firebaseRef.putString(数据, '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 存储上传的动态进度条

Dynamic progress bar for Firebase Storage Upload

firebase

firebase-storage

angular