从多个文件上传 Firebase 存储中获取下载 url

Question

我是 firebase 和 angularjs 的新手，我在从 firebase 存储中获取下载 url 并将它们存储在 firebase 实时数据库中时遇到了困难。

我能够将多个文件上传到 Firebase 存储。问题是当我将下载 url 存储到 firebase 实时数据库中时，所有数据库 url 值都是相同的。它应该根据每个文件的下载 URL 有所不同。

这是我的脚本：

$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);
      });
    };
  })  
  };
};

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

任何帮助表示赞赏。谢谢

Answer 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);
        }

    }

Answer 2

尝试使用下面的代码：

$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);
      });  


  };
};

一切顺利！