AngularFire2 – Firebase storage getDownloadURL () – Cómo devolver la URL para firestore

Solución:

//observable to store download url
downloadURL: Observable<string>;

task.snapshotChanges().pipe(
    finalize(() => {
        this.downloadURL = fileRef.getDownloadURL();
        this.downloadURL.subscribe(url=>{this.imageUrl = url})
    })
)

consulte: https: //github.com/ReactiveX/rxjs/blob/master/doc/observable.md

Esta respuesta no es relevante para la versión de Firebase 5.0, eliminaron downloadURL () de la tarea de carga. Consulte el doc.

los .downloadURL() observable emite la cadena de URL de descarga una vez que se completa la carga. Entonces necesitas suscribirte para obtener el valor.

uploadImage(base64data) {

  const filePath = (`myURL/photo.jpg`);
  //const storageRef = firebase.storage().ref();

  var metadata = {
    contentType: 'image',
    cacheControl: "public, max-age=31536000",
  };

  const ref = this.storage.ref(filePath);
  const task = ref.putString(base64data, 'data_url', metadata);
  const downloadURL = task.downloadURL();

  downloadURL.subscribe(url=>{
     if(url){
         console.log(url);
         //wirte the url to firestore
     }
  })

}

Espero que esto ayude. consulte este blog para obtener más detalles

.downloadURL() ya no funciona, necesitas usar .getDownloadURL() combinado con finalize() al igual que:

.html expediente

<input type="file" (change)="uploadFile($event)">

.ts expediente

import {
  AngularFireStorage,
  AngularFireStorageReference,
  AngularFireUploadTask
} from '@angular/fire/storage';
import { Component } from '@angular/core';
import { finalize } from 'rxjs/operators';

@Component({
  selector: 'app-upload',
  templateUrl: './upload.component.html',
  styleUrls: ['./upload.component.scss']
})
export class UploadComponent {
    constructor(private angularFireStorage: AngularFireStorage) {}

    public uploadFile(event: any): void {
        for (let i = 0; i < event.target.files.length; i++) {
            const file = event.target.files[i];
            const fileRef: AngularFireStorageReference = this.angularFireStorage.ref(
              file.name
            );
            const task: AngularFireUploadTask = this.angularFireStorage.upload(
              file.name,
              file
            );
            task
                .snapshotChanges()
                .pipe(
                finalize(() => {
                    fileRef.getDownloadURL().subscribe(downloadURL => {
                        console.log(downloadURL);
                    });
              })
          )
          .subscribe();
       }
   }
}  

Además, tenga en cuenta el @ angular / fuego, es porque todo AngularFire2 el paquete se está moviendo hacia @ angular / fuego y esta es la forma recomendada de usar a partir de ahora.

---

---

Utiliza Nuestro Buscador