AngularFire tâche de stockage observable ne se termine jamais

voix
1

Je suis en train de charger une image de la galerie de la caméra à Firebase avec succès, mais je ne peux pas getDownloadURL () comme tâche de stockage AngularFire observable ne se termine jamais.

J'ai consulté la documentation suivante le « pourcentage de téléchargement de surveillance » - Exemple d' utilisation ici

S'il vous plaît pouvez-vous conseiller de bien vouloir ce que je fais mal ou privilégier une autre approche. Merci.

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

Les importations concernées

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

Ionique natif 5 Référence: https://blog.ionicframework.com/help-test-ionic-native-5/

dépendances pertinentes

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
  },
Créé 19/12/2018 à 14:21
source utilisateur
Dans d'autres langues...                            


1 réponses

voix
1

On dirait que vous êtes 99,9% du chemin, bon travail sur celui - ci! Et merci pour fournir les liens vers la documentation. Je pense que la raison pour laquelle l' finalize()on ne mise à feu est parce que vous n'êtes pas abonné à la .snapshotChanges(). Sans .subscribe()votre code ne sera pas réellement écouter les changements décocha par task.snapshotChanges().

Dans l' exemple que vous avez trouvé , notez qu'il ya un .subscribe()coincé sur l'après .pipe():

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

Donc, votre code devrait être:

//---------------------------------
// But this Observable never completes?....
//---------------------------------
task.snapshotChanges().pipe(
    finalize(() => {
        this.downloadURL = fileRef.getDownloadURL();
        console.log('My ImageUrl' + this.downloadURL);
    })
).subscribe();
Créé 09/01/2019 à 13:18
source utilisateur

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more