无法从Firebase存储UploadTask更新ProgressBar

时间:2016-08-30 08:41:11

标签: javascript firebase firebase-storage angularfire2

我正在使用Angular2和Firbase Storage。我试图获得“uploadProgress”#39;用于更新(在HTML文件中指定)的值,但不知何故,' uploadProgress' uploadTask.on函数中的变量只是可以更新。是因为它在另一个线程上运行吗?这个问题的解决方法是什么?希望可以有人帮帮我。感谢

=======================================================================
import { Component } from '@angular/core';
import { AngularFire, FirebaseListObservable } from 'angularfire2';
import * as firebase from 'firebase';

@Component({
  selector: 'app-create-folder',
  templateUrl: './create-folder.component.html'
})

 export class CreateFolderComponent { 

 public fItem: FolderItem;
 public f: File;
 public storageRef: Storage;
 public uploadProgress = 0;


constructor(public af: AngularFire) {}

onSubmit(){

const storageRef = firebase.storage().ref().child('myclient/' +     
this.fItem.file_name);
var uploadTask = storageRef.put(this.f);  


  uploadTask.on('state_changed', function(snapshot){
  this.uploadProgress = (snapshot.bytesTransferred / snapshot.totalBytes) *  
  100;


  });

 }


 }

1 个答案:

答案 0 :(得分:2)

  

是因为它在另一个线程上运行吗?

因为它在另一个环境中运行。

要解决问题,请将分配给“state_changed”之外的某个变量。回调函数。之后,您可以使用此变量作为初始实例的参考。

public uploadFile() {
        let self = this;
        ...
        firebaseUploadTask.on('state_changed',
            function progress(snapshot) {
                self.percentage = (snapshot.bytesTransferred / snapshot.totalBytes) * 100;
            },
            function error(error) {},
            function complete() {}
        );
    }