从 Firebase 存储中检索图像到 vue 应用程序答案

【问题标题】：retrieving an image from firebase storage to a vue app从 Firebase 存储中检索图像到 vue 应用程序
【发布时间】：2019-03-31 17:10:35
【问题描述】：

我正在尝试从我的 firebase 存储下载图像以在我的 Vue 应用程序中呈现它，从应用程序上传到 firebase 存储是成功的，但是在检索时它给我一个错误无法读取未定义的属性“0” ，我在 Vue CLI 3 设置和 vuex 中使用 firebase SDK 来管理我的状态。这是我在主 store.js 文件中的操作中的功能设置

  let imageUrl
  let key
  firebase.database().ref('meetups').push(meetup)
    .then((data) => {
      key = data.key
      return key
    })
    .then(key => {
      const filename = payload.image.name
      const ext = filename.slice(filename.lastIndexOf('.'))
      return firebase.storage().ref('meetups/' + key + '.' + ext).put(payload.image)
    })
    .then(fileData => {
      imageUrl = fileData.metadata.downloadURLs[0]
      return firebase.database().ref('meetups').child(key).update({imageUrl: imageUrl})
    })
    .then(() => {
      commit('createMeetup', {
        ...meetup,
        imageUrl: imageUrl,
        id: key
      })
    })
    .catch((error) => {
      console.log(error)
    })

【问题讨论】：

请为 API 调用添加一个示例响应结构。这将有助于识别代码中的问题。

标签： firebase vue.js

【解决方案1】：

所以看起来你正在学习 Max 的 Vue 课程。非常棒的课程，但自发布以来，firebase 发生了一些细微的变化。你可以试试这个，因为我认为问题是你没有从存储中检索图像 URL，所以它没有被插入到你的数据库中，所以应用程序不能调用它。它试图调用“0”。所以把你的 createMeetup 函数改成这样：

createMeetup ({commit, getters}, payload) {
            const meetup = {
                title: payload.title,
                location: payload.location,
                description: payload.description,
                preview: payload.preview,
                date: payload.date,
                creatorId: getters.user.id
            }
            let storageRef
            let uploadTask
            let key
            firebase.database().ref('meetups').push(meetup)
                .then((data) => {
                    key = data.key
                    return key
                })
                .then(key => {
                    const filename = payload.image.name
                    const ext = filename.slice(filename.lastIndexOf('.'))
                    storageRef = firebase.storage().ref();
                    uploadTask = storageRef.child('meetups/' + key + ext).put(payload.image)
                    return uploadTask
                    })
                    .then((uploadTask) => {
                    // Upload completed successfully, now we can get the download URL
                    uploadTask.ref.getDownloadURL().then((downloadURL) => {
                        firebase.database().ref('meetups').child(key).update({imageUrl: downloadURL})
                        .then(() => {
                            commit('createMeetup', {
                                ...meetup,
                                imageUrl: downloadURL,
                                id: key
                            })
                        })
                        .catch((error) => {
                        })

                    })
                })
        },

我认为这应该可以解决问题。

【讨论】：