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

时间:2017-04-22 04:19:08

标签: javascript firebase firebase-realtime-database firebase-storage angularfire2

我能够在存储中获取项目的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);
       });
     }
   }

1 个答案:

答案 0 :(得分:0)

当尚未检索到下载网址时,您正在将该项目推送到数据库。要解决此问题,请将调用移至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);
   });
}