使用 VueJs 在 firebase 中上传和下载存储图像

Posted 2023-02-22

【中文标题】使用 VueJs 在 firebase 中上传和下载存储图像

【英文标题】：uploading and downloading storage images in firebase with VueJs

【发布时间】：2020-06-14 16:55:13

【问题描述】：

我正在使用 Vue/vuex 和 firebase 构建这个简单的应用程序，我想方便用户上传图像，一旦应用程序更新，这些图像就会从 firebase 存储中获取，用新上传的图像修改当前数据库 这是我的代码：

createMeet( commit, getters , payload) 
      const newMeet = 
        title: payload.title,
        description: payload.description,
        location: payload.location,
        date: payload.date,
        video_url: payload.video_url,
        idCreator: getters.getUser.id
      
      let image_url;
      let key;
      firebase.database().ref('meetUps').push(newMeet)
        .then((data) => 
          console.log(data)
          key = data.key
          return key
        )
        .then(key => 
          const filename = payload.image.name
          const fileExtension = filename.slice(filename.lastIndexOf('.'))
          return firebase.storage().ref('meetUps/' + key + '.' + fileExtension).put(payload.image)
        )---the image get storaged in the firebase storage

        .then(fileData => 
          image_url = fileData.metadata.downloadURLs()
          return firebase.database().ref('meetUps/').child(key).update( image_url: image_url )
        )--------->updating in the database the storaged object in there passing a new paranmeter
                    image_url, with a new value contained in variable iimage_url
        .then(() => 
          commit('meetsCreator', 
            ...newMeet,
            image_url: image_url,------------>putting changes in some mutation which modifies the state
            id: key,

          )
        )
        .catch(error => 
          console.log(error)
        )
      // commit('meetsCreator',newMeet)
    ,

图像被推送到 firebase storaged 但是一旦我尝试使用 downloadUrls 修改数据库添加这个新元素（图像），就不起作用了。 请问有什么建议吗？....提前谢谢！！！

【参考方案1】：

您需要使用 javascript SDK 中的 getDownloadURL() 方法，该方法是异步的，并返回一个通过下载 URL 解析的 Promise。

所以，以下应该可以解决问题：

  //...
  firebase.database().ref('meetUps').push(newMeet)
    .then(ref => 
      key = ref.key
      const filename = payload.image.name
      const fileExtension = filename.slice(filename.lastIndexOf('.'))
      return firebase.storage().ref('meetUps/' + key + '.' + fileExtension).put(payload.image)
    )
    .then(uploadTaskSnapshot => 
       return uploadTaskSnapshot.ref.getDownloadURL();
    .then(url => 
      return firebase.database().ref('meetUps/').child(key).update( image_url: url )
    )
    //....

【讨论】：

真的非常感谢 Renaud ，简单又快速....真的非常感谢您的大力帮助！！！！