Firebase存储,将图像检索到vue应用

时间:2018-09-09 09:08:42

标签: javascript firebase vue.js firebase-storage vuex

我正在尝试从Firebase存储中下载图像以在Vue应用程序中进行渲染,从应用程序到Firebase存储的上传成功,但是在检索时出现错误,我在使用Firebase SDK Vue CLI 3设置和vuex来管理我的状态。这是主store.js文件中我的操作中的功能设置

createMeetUp({commit, getters}, payload) {
  //here my payload is an object contains the following props
  const meetup = {
    title: payload.title,
    location: payload.location,
    date: payload.date.toISOString(),
    description: payload.description,
    creatorId: getters.user.id
  }
  
  let imageUrl
  let key
  
  //now i am reaching out to the firebase database to store the above object
  firebase.database().ref('meetup').push(meetup)
  .then(data => {
    key = data.key
    return key
  })
  .then(key => {
    //also in my payload object i stored an image file
    //so here i am uploading the image to the firebase storage
    const fileName = payload.image.name
    const extension = fileName.slice(fileName.lastIndexOf('.'))
    return firebase.storage().ref('meetup/' + key + '.' +       extension).put(payload.image)
  })
  .then(imageInfo => {
  //the issue is here in this then() block as i am stuck on how to retrieve the image from the storage to render it in the app
    imageUrl = imageInfo.getDownloadURL()
    return firebase.database().ref('meetups').child(key).update({
          imageUrl: imageUrl
      })
  })
  .then(() => {
    //here i am simply commiting my mutation.. 
    commit('createMeetUp', {
      ...meetup,
      imageUrl: imageUrl,
      id : key
    })
  })
  .catch(err => console.log(err))
  
  
  
  
  
  
  
}

我得到的错误是:

  

TypeError:imageInfo.getDownloadURL不是函数

同样,我认为问题出在then()块中,我从Firebase存储中检索图像。 预先感谢

0 个答案:

没有答案