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

Posted 2023-03-22

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

【英文标题】：get download url from multiple file upload firebase storage

【发布时间】：2017-07-08 05:02:45

【问题描述】：

我是 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 都是相同的。我需要的是每个密钥存储每个不同的存储链接。

任何帮助表示赞赏。谢谢

【参考方案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);
        

    

【讨论】：

请考虑添加至少一些解释，好像为什么这回答了这个问题

工作真棒。非常感谢

【参考方案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);
      );  


  ;
;

一切顺利！

【讨论】：

还是不行。我用你的代码得到的结果是firebase数据库只存储上传到firebase存储的第一张图片的url。我需要存储在 firebase 数据库中的文件的所有下载 url

您好，我对上面的代码做了一些代码修改；删除了几行，根据需要进行调整。您能否确认“文件”数组在提交时包含多个文件？