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

Question

我正在使用 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 修改数据库添加这个新元素（图像），就不起作用了。 请问有什么建议吗？....提前谢谢！！！

Answer 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 })
    })
    //....