我想使用angularfire2将图像的downloaUrl保存在数据库中

Question

我能够获取存储项目的 url，但我无法将它们保存到数据库中。 item.downloadUrl 无法接收 this.imageUrl。有没有其他方法可以将项目的 downloadUrl 保存到数据库？

 addItem(item){
      // @TODO - Storage ref 
     let storageRef = firebase.storage().ref();


     for(let selectedFile of [(<HTMLInputElement>document.getElementById('image')).files[0]]){

       let path=`/${this.folder}/${selectedFile.name}`;
       let iRef= storageRef.child(path);
       iRef.put(selectedFile).then((snapshot)=>{
         item.image=selectedFile.name;
         item.path=path;

         storageRef.child(item.path).getDownloadURL().then((url)=>{
           //Setting Image Url below
         this.imageUrl =url;
         item.downloadUrl=this.imageUrl; 
         console.log(this.imageUrl);
       });

         return this.items.push(item);

       }).catch((error)=>{
         console.log(error);
       });
     }
   }

Answer 1

您正在将项目推送到数据库，而下载 URL 尚未检索到。要解决此问题，请将对 databaseRef.push() 的调用移至 then:

let storageRef = firebase.storage().ref();

for(let selectedFile of [(<HTMLInputElement>document.getElementById('image')).files[0]]){

   let path=`/${this.folder}/${selectedFile.name}`;
   let iRef= storageRef.child(path);
   iRef.put(selectedFile).then((snapshot)=>{
      item.image=selectedFile.name;
      item.path=path;

      return storageRef.child(item.path).getDownloadURL().then((url)=>{
         //Setting Image Url below
         this.imageUrl =url;
         item.downloadUrl=this.imageUrl; 
         console.log(this.imageUrl);
         return this.items.push(item);
      });
   }).catch((error)=>{
     console.log(error);
   });
}

但是您可以通过直接从 storageRef.put():

的完成回调中获得的快照使用下载 URL 来大大简化代码

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

      this.imageUrl =url;
      item.downloadUrl=this.imageUrl; 
      return this.items.push(item);
   });
}

我想使用angularfire2将图像的downloaUrl保存在数据库中

I want to save the downloaUrl of image in the database using angularfire2

javascript

firebase

firebase-realtime-database

firebase-storage

angularfire2