web-dev-qa-db-fra.com

Firebase obtient l'URL de téléchargement après le téléchargement réussi de l'image sur le stockage Firebase

J'essaie de télécharger une seule image sur Firebase Storage, puis de récupérer son URL de téléchargement et de l'assigner à une variable.

Je peux télécharger mon image sur Firebase avec succès, mais je ne peux pas récupérer l'URL de téléchargement. voici ce que j'ai déjà essayé.

upload() {
    let storageRef = firebase.storage().ref();
    let success = false;

    for (let selectedFile of [(<HTMLInputElement>document.getElementById('file')).files[0]]) {
      let router = this.router;
      let af = this.af;
      let folder = this.folder;
      let path = `/${this.folder}/${selectedFile.name}`;
      var iRef = storageRef.child(path);
      iRef.put(selectedFile).then((snapshot) => {
        console.log('Uploaded a blob or file! Now storing the reference at', `/${this.folder}/images/`);
        af.list(`/${folder}/images/`).Push({ path: path, filename: selectedFile.name })
      });
    }

    // This part does not work
    iRef.getDownloadURL().then((url) => {this.image = url});
    console.log('IREF IS ' + iRef)
    console.log('IMAGEURL IS ' + this.image)

  }

Les journaux de la console sont les suivants:

    IREF IS gs://my-app-159520.appspot.com/images/Screen Shot 2017-08-14 at 12.19.01.png
    view-order.component.ts:134 IMAGEURL IS undefined
Uploaded a blob or file! Now storing the reference at /images/images/

J'ai essayé d'utiliser la référence iRef pour récupérer l'URL de téléchargement, mais je continue à recevoir des erreurs. J'essaie de saisir l'URL afin de pouvoir l'affecter à la variable this.image, puis de la stocker dans ma base de données à l'aide d'une autre fonction.

javascriptangularfirebasefirebase-realtime-databasefirebase-storage
14
Brian Revie

L'API a changé. Utilisez ce qui suit pour obtenir l'URL de téléchargement

  snapshot.ref.getDownloadURL().then(function(downloadURL) {
    console.log("File available at", downloadURL);
  });
13
FacePalm

Je pense que j'ai compris cela et cela semble fonctionner, j'ai réalisé que je devais récupérer l'URL de téléchargement de l'instantané et l'assigner à this.image comme ceci:

upload() {
    let storageRef = firebase.storage().ref();
    let success = false;

    for (let selectedFile of [(<HTMLInputElement>document.getElementById('file')).files[0]]) {
      let router = this.router;
      let af = this.af;
      let folder = this.folder;
      let path = `/${this.folder}/${selectedFile.name}`;
      var iRef = storageRef.child(path);
      iRef.put(selectedFile).then((snapshot) => {

        // added this part which as grabbed the download url from the pushed snapshot
        this.image = snapshot.downloadURL;

        console.log('Uploaded a blob or file! Now storing the reference at', `/${this.folder}/images/`);
        af.list(`/${folder}/images/`).Push({ path: path, filename: selectedFile.name })

        console.log('DOWNLOAD URL IS ' + this.image)
      });
    }

  }

J'ai ensuite exécuté mon autre fonction pour ajouter l'URL à la base de données et cela s'est bien passé là où on s'y attendait!

J'ai donc téléchargé l'image dans la base de données, puis en utilisant l'instantané de la fonction put, j'ai ensuite affecté mon image variable: any à l'instantané downloadURL comme ceci:

this.image = snapshot.downloadURL;

J'espère que cela peut aider quelqu'un d'autre!

5
Brian Revie

En 2019, j'ai eu accès à l'url d'un fichier nouvellement enregistré dans Firebase avec la fonction suivante:

const uploadImage = async(uri) => {
  const response = await fetch(uri);
  const blob = await response.blob();
  // child arg specifies the name of the image in firebase
  const ref = firebase.storage().ref().child(guid());
  ref.put(blob).then(snapshot => {
    snapshot.ref.getDownloadURL().then(url => {
      console.log(' * new url', url)
    })
  })
}
2
duhaime