可观察到的 AngularFire 存储任务永远不会完成

Question

我正在将相机图库图像成功上传到 firebase，但是我无法使用 getDownloadURL()，因为 AngularFire 存储任务可观察值从未完成。

我咨询过documentation following the 'Monitoring upload percentage' - Example Usage here

请您指出我做错了什么或推荐一种替代方法。谢谢。

async onCamera(){
      try{
          const options: CameraOptions = {
          quality: 100,
          targetHeight:500,
          targetWidth:500,
          allowEdit: true,
          correctOrientation: true,
          sourceType: this.camera.PictureSourceType.PHOTOLIBRARY,
          destinationType: this.camera.DestinationType.DATA_URL,
          encodingType: this.camera.EncodingType.JPEG,
          mediaType: this.camera.MediaType.PICTURE
        }
        const imageData = await this.camera.getPicture(options);
        const image = 'data:image/jpeg;base64,' + imageData;
        const id = Math.random().toString(36).substring(2);
        const user = this.authenticatorService.getUser();
        const fileRef = this.afStorage.ref(user.uid + '/images/categories/'+id);
        const task = fileRef.putString(image, 'data_url');
        console.log('Done! - I can see this comment successfully logged to the terminal');
        //---------------------------------
        // But this Observable never completes?....
        //---------------------------------
        task.snapshotChanges().pipe(
          finalize(() => {
            console.log('Sequence complete'); // Execute when the observable completes: never logged
            this.downloadURL = fileRef.getDownloadURL();
            this.downloadURL.subscribe(url=> this.imageUrl=url);
            console.log('My ImageUrl' + this.imageUrl); // Never logged to terminal?
          }));

        console.log('Finished! - I can see this comment successfully logged to the terminal');
      } catch(e) {
        console.error(e);
        this.errorMessage = JSON.stringify(e);
        console.log(this.errorMessage);
      }
    }

相关依赖项

"dependencies": {
    "@angular/animations": "6.1.0",
    "@angular/common": "6.1.0",
    "@angular/compiler": "6.1.0",
    "@angular/compiler-cli": "6.1.0",
    "@angular/core": "6.1.0",
    "@angular/fire": "^5.1.0",
    ....
    "@ionic-native/camera": "^5.0.0-beta.22",
    "@ionic-native/core": "^5.0.0-beta.22",
    ...
    "cordova-plugin-camera": "~4.0.3",
    ...
    "firebase": "^5.5.9",
    "ionic-angular": "3.9.2",
    "promise-polyfill": "^8.1.0",
    "rxjs": "^6.3.3",
    "rxjs-compat": "^6.3.3",
    "cordova-android": "~7.1.4"
  },

Answer 1

您看起来已经完成了 99.9%，这一项做得很好！并感谢您提供文档链接。我认为 finalize() 从未触发的原因是您没有订阅 .snapshotChanges()。如果没有 .subscribe()，您的代码实际上不会监听 task.snapshotChanges().

引发的更改

在 example you found 中，请注意 .subscribe() 卡在 .pipe() 之后：

// get notified when the download URL is available
task.snapshotChanges().pipe(
    finalize(() => this.downloadURL = fileRef.getDownloadURL() )
)
.subscribe()

所以你的代码应该是：

//---------------------------------
// But this Observable never completes?....
//---------------------------------
task.snapshotChanges().pipe(
    finalize(() => {
        this.downloadURL = fileRef.getDownloadURL();
        console.log('My ImageUrl' + this.downloadURL);
    })
).subscribe();

可观察到的 AngularFire 存储任务永远不会完成

AngularFire storage task observable never completes

angular

observable

angularfire5