Получение изображения из хранилища firebase в приложение vue

Я пытаюсь загрузить изображение из своего хранилища firebase, чтобы отобразить его в моем приложении Vue, загрузка из приложения в хранилище firebase прошла успешно, однако при извлечении выдает ошибку, не могу прочитать свойство '0' из undefined, я использование Firebase SDK в настройке Vue CLI 3 и vuex для управления моим состоянием. Вот настройка функции в моих действиях в основном файле 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.info(error)
    })

Pl добавьте образец структуры ответа для вызова API. Это поможет выявить проблему в коде.

— 27.10.2018 04:05

firebase vue.js

27.10.2018 00:55

Интеграция Angular - Firebase Analytics

Узнайте, как настроить Firebase Analytics и отслеживать поведение пользователей в вашем приложении Angular.

1 351

Ответы 1

Похоже, вы проходите курс Макса по 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) => {
                        })

                    })
                })
        },

И я думаю, это должно решить проблему.

27.10.2018 10:03