Question

我正在尝试从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)
    })

Answer 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) => {
                        })

                    })
                })
        },

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

从Firebase存储检索图像到Vue应用

1 个答案: