Angular 2 Firebase 存储 - 上传完成时的图像预览

Question

我试图在uploadTask成功后显示上传的img，但是由于异步加载，视图试图在上传完成之前显示它。

这是方法：

upload(value){
    let file = value.target.files[0];
    let storageRef = firebase.storage().ref('noticias/' + file.name);
    let uploadTask = storageRef.put(file);

    uploadTask.on(firebase.storage.TaskEvent.STATE_CHANGED,
      function(snapshot) {
        let progress = (snapshot.bytesTransferred / snapshot.totalBytes) * 100;
        console.log('Upload is ' + progress + '% done');
        switch (snapshot.state) {
          case firebase.storage.TaskState.PAUSED: // or 'paused'
            console.log('Upload is paused');
            break;
          case firebase.storage.TaskState.RUNNING: // or 'running'
            console.log('Upload is running');
            break;
        }
      }, function(error) {
      switch (error) { 
        case 'storage/unauthorized':
          break;

        case 'storage/canceled':
          break;

        case 'storage/unknown':
          break;
      }
    }, function() {
      // Upload completed successfully, now we can get the download URL
      let downloadURL = uploadTask.snapshot.downloadURL;
      console.log('Upload done!');
    });

    storageRef.getDownloadURL().then(url => this.imgUrl = url);
    this.uploadedImg = true;
  }

这是视图：

<img *ngIf="uploadedImg" [src]="imgUrl" />

方法的最后两行加载得太早了。我还尝试将它们移动到成功函数中。问题是如果我将它们移到那里，this 不再引用该类，并且我无法更改视图中的值。

Answer 1

丢失对this 的引用是javascript 中的一个常见问题，并且有一个简单的模式可以跟踪它。您在成功函数中移动线条是对的，只需在开头执行此操作：

upload(value){
    let that = this;
    let file = value.target.files[0];

现在that 将始终指向原始this，以下将按预期工作：

}, function() {
    // Upload completed successfully, now we can get the download URL
    let downloadURL = uploadTask.snapshot.downloadURL;
    console.log('Upload done!');
    // Using original `this`
    storageRef.getDownloadURL().then(url => that.imgUrl = url);
    that.uploadedImg = true;
});