可观察到的AngularFire存储任务永远不会完成 [英] AngularFire storage task observable never completes

问题描述

我正在成功将相机库图像上传到Firebase，但是由于无法观察到的AngularFire存储任务无法完成，所以我无法获取DownloadURL().

I am uploading a camera gallery image to firebase successfully, however I am unable to getDownloadURL() as the AngularFire storage task observable never completes.

我已经查阅了文档 监控上传百分比"-示例用法此处

I have consulted the documentation following the 'Monitoring upload percentage' - Example Usage here

请您告知我我做错了什么，或建议其他方法.谢谢.

Please can you kindly advise what I am doing wrong or recommend an alternative approach. Thanks.

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

相关进口

import { AngularFireStorage, AngularFireStorageReference, AngularFireUploadTask } from '@angular/fire/storage';
    import { Observable } from 'rxjs/Observable';
    import { Camera, CameraOptions} from '@ionic-native/camera/ngx';
    import { finalize } from 'rxjs/operators';

Ionic Native 5参考: https://blog.ionicframework.com/help-test-ionic-native -5/

Ionic Native 5 Reference: https://blog.ionicframework.com/help-test-ionic-native-5/

相关依赖项

"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"
  },

推荐答案

您看起来已经完成了99.9％的工作，这很不错！并感谢您提供指向文档的链接.我认为finalize()永不触发的原因是因为您没有订阅.snapshotChanges().如果没有.subscribe()，您的代码将实际上不会监听task.snapshotChanges()触发的更改.

You look like you're 99.9% of the way there, nice job on this one! And thanks for providing the links to the docs. I think the reason that the finalize() is never firing is because you aren't subscribing to the .snapshotChanges(). Without .subscribe() your code won't actually listen to the changes fired off by task.snapshotChanges().

在您找到的示例中，请注意，在.pipe()之后有一个.subscribe()卡在了上面:

In the example you found, notice that there is a .subscribe() stuck on after the .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存储任务永远不会完成的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！