Question

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

我已在“监控上传百分比”之后咨询了documentation-示例用法here

请您告知我我做错了什么，或者推荐其他方法。谢谢。

app.Query(x => x.Frame("#AccountChekIFRAME").Css("#LOGIN"))

相关进口

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

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

相关依赖项

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';

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存储任务永远不会完成

1 个答案: