从多个文件上传firebase存储中获取下载URL

时间:2017-02-18 18:04:14

标签: angularjs firebase firebase-realtime-database firebase-storage

我是firebase和angularjs的新手,我很难从firebase存储中获取下载URL并将它们存储在firebase实时数据库中。

我能够将多个文件上传到firebase存储。问题是当我将下载url存储到firebase实时数据库时,所有数据库url值都相同。它应该基于每个文件downloadURL不同。

这是我的剧本:

$scope.submitPhotos = function(file){
  console.log(file);
  var updateAlbum = [];
  for (var i = 0; i < file.length; i++) {                
    var storageRef=firebase.storage().ref(albumtitle).child(file[i].name);
    var task=storageRef.put(file[i]);

    task.on('state_changed', function progress(snapshot){
      var percentage=( snapshot.bytesTransferred / snapshot.totalBytes )*100;
      if (percentage==100){
      storageRef.getDownloadURL().then(function(url) {
        var galleryRef = firebase.database().ref('gallery/'+albumkey);
        var postkey = firebase.database().ref('gallery/'+albumkey).push().key;       
        updateAlbum={img:url};
        firebase.database().ref('gallery/'+ albumkey+'/'+postkey).update(updateAlbum);
      });
    };
  })  
  };
};

enter image description here

正如您所见,我能够将网址存储到数据库中,但所有网址都相同。我需要的是每个密钥库存储每个不同的链接。

任何帮助表示赞赏。感谢

2 个答案:

答案 0 :(得分:1)

function uploadImg(file,i) {

return new Promise((resolve,reject)=>{


var storageRef=firebase.storage().ref("store-images/"+file[i].file.name);
             task = storageRef.put(file[i].file);

            task.on('state_changed', function progress(snapshot){

            var percentage=( snapshot.bytesTransferred / snapshot.totalBytes )*100;
            console.log(percentage);

            // use the percentage as you wish, to show progress of an upload for example
            }, // use the function below for error handling
            function (error) {  
              console.log(error);
            }, 
            function complete ()  //This function executes after a successful upload
            {

                    task.snapshot.ref.getDownloadURL().then(function(downloadURL) {

                        resolve(downloadURL)

                    });


            });  

    })

}


async function putImage(file) {

    for (var i = 0; i < file.length; i++) {

            var dd = await uploadImg(file,i);

            firebase.database().ref().child('gallery').push(dd);
        }

    }

答案 1 :(得分:0)

尝试使用以下代码:

$scope.submitPhotos = function(file){
  console.log(file);
  var updateAlbum = [];
  for (var i = 0; i < file.length; i++) {                
    var storageRef=firebase.storage().ref(albumtitle).child(file[i].name);
    var task=storageRef.put(file[i]);

    task.on('state_changed', function progress(snapshot)
    {
      var percentage=( snapshot.bytesTransferred / snapshot.totalBytes )*100;
      // use the percentage as you wish, to show progress of an upload for example
    }, // use the function below for error handling
     function (error) {  

          switch (error.code) {
            case 'storage/unauthorized':
              // User doesn't have permission to access the object
              break;

            case 'storage/canceled':
              // User canceled the upload
              break;

            case 'storage/unknown':
              // Unknown error occurred, inspect error.serverResponse
              break;
          }

      }, function complete ()  //This function executes after a successful upload
      {
        let dwnURL = task.snapshot.downloadURL;
        let galleryRef = firebase.database().ref('gallery/'+albumkey);
        let postkey = firebase.database().ref('gallery/'+albumkey).push().key;       
        updateAlbum={img:dwnURL};
        firebase.database().ref('gallery/'+ albumkey+'/'+postkey).update(updateAlbum);
      });  


  };
};

一切顺利!