Firebase 스토리지, vue 앱으로 이미지 검색

Firebase 스토리지, vue 앱으로 이미지 검색

파이어베이스 스토리지에서 이미지를 다운로드하여 Vue 앱에 렌더링하려고 하면 애플리케이션에서 FireBase 스토리지로 업로드가 성공하지만 검색 시 오류가 발생하므로 Vue CLI 3 설정에서 FireBase SDK를 사용하고 vuex를 사용하여 상태를 관리하고 있습니다.main 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()파이어베이스 스토리지에서 이미지를 가져올 수 있는 블록입니다.잘 부탁드립니다

위의 코멘트에 따라서, (테스트가 아닌...) 틀리지 않으면, 이하가 동작합니다.

주의:getDownloadURL()(여기를 참조) 약속을 반환하므로 약속을 묶어야 합니다.

  ....
  .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(uploadTaskSnapshot => {
     return uploadTaskSnapshot.ref.getDownloadURL()
  })
  .then(imageUrl => {
    return firebase.database().ref('meetups').child(key).update({
          imageUrl: imageUrl
      })
  })
  ....

언급URL : https://stackoverflow.com/questions/52242991/firebase-storage-retrieving-an-image-to-a-vue-app