Как получить url загруженного в firebase файла?

Question

[Александр]

Сейчас смотрю курс по интеграции Vue JS с firebase, там автор выводит из firebase данные на фронтенд. Но используя его код у меня возникает ошибка. Я не могу получить адрес загруженного в хранилище firebase файла, чтобы можно было вывести его в src картинки.

Код который использует автор:

import * as fb from 'firebase' // подключение библиотеки API firebase

class Ad {
  constructor (title, description, ownerId, imageSrc = '', promo = false, id = null) {
    this.title = title
    this.description = description
    this.ownerId = ownerId
    this.imageSrc = imageSrc
    this.promo = promo
    this.id = id
  }
}

export default {
  state: {
    ads: []
  },
  mutations: {
    createAd (state, payload) {
      state.ads.push(payload)
    },
    loadAds (state, payload) {
      state.ads = payload
    }
  },
  actions: {
    async createAd ({commit, getters}, payload) {
      commit('clearError')
      commit('setLoading', true)

      const image = payload.image

      try {
        const newAd = new Ad(
          payload.title,
          payload.description,
          getters.user.id,
          '',
          payload.promo
        )

        const ad = await fb.database().ref('ads').push(newAd)
        const imageExt = image.name.slice(image.name.lastIndexOf('.'))

        const fileData = await fb.storage().ref(`ads/${ad.key}.${imageExt}`).put(image)
        const imageSrc = fileData.metadata.downloadURLs[0]

        await fb.database().ref('ads').child(ad.key).update({
          imageSrc
        })

        commit('setLoading', false)
        commit('createAd', {
          ...newAd,
          id: ad.key,
          imageSrc
        })
      } catch (error) {
        commit('setError', error.message)
        commit('setLoading', false)
        throw error
      }
    },
    async fetchAds ({commit}) {
      commit('clearError')
      commit('setLoading', true)

      const resultAds = []

      try {
        const fbVal = await fb.database().ref('ads').once('value')
        const ads = fbVal.val()

        Object.keys(ads).forEach(key => {
          const ad = ads[key]
          resultAds.push(
            new Ad(ad.title, ad.description, ad.ownerId, ad.imageSrc, ad.promo, key)
          )
        })

        commit('loadAds', resultAds)
        commit('setLoading', false)
      } catch (error) {
        commit('setError', error.message)
        commit('setLoading', false)
        throw error
      }
    }
  },
  getters: {
    // ...
  }
}

${ad.key}.${imageExt} - здесь строка с названием загруженного файла и его расширением.
getDownloadURLs - свойство через который автор получает адреса загруженных картинок.

Библиотека firebase работает, при загрузке с фронта картинки попадают в хранилище.

Я могу получить информацию по загруженной картинке, но у свойства metadata нет downloadURLs!


Возможно дело в том, что автор использует старую версию firebase и сейчас вместо getDownloadURLs используется другое поле или метод для вывода информации по загруженным файлам?

Comments

[Роман Александрович]

странно вот тут https://firebase.google.com/docs/storage/web/file-... есть поле fullPath логично предположить что url будет ваш уникальный адресс + fullPath

а вот тут https://firebase.google.com/docs/storage/web/downl... как я вижу тянут урлы файлов

// Create a reference to the file we want to download
var starsRef = storageRef.child('images/stars.jpg');

// Get the download URL
starsRef.getDownloadURL().then(function(url) {
  // Insert url into an <img> tag to "download"
})

[Александр]

мне еще подсказали вариант оставлю здесь для интересующихся:

const imageSrc = await fileData.ref.getDownloadURL()

[Kengda]

Александр, const imageSrc = await fileData.ref.getDownloadURL() помогло. Но при обновлении страницы всё пропадает. Нащли ли вы решение?

[asd dsa]

Kengda, нужно обновить запись в базе, что бы после перезагрузки все оставалось

что-то типа этого:

const src = await fileData.ref.getDownloadURL();
                await fb.database().ref('name').child(ad.key).update({    // update img in db
                    src
                });

[sashaplihan]

Kengda, У меня тоже слетало, я в ref неправильное название базы данных вставил в:
async fetchAds ({commit}) {
commit('clearError')
commit('setLoading', true)

const resultAds = []
try {
const fbVal = await fb.database().ref('ads-sasha').once('value')
const ads = fbVal.val()
Object.keys(ads).forEach(key => {
const ad = ads[key]
resultAds.push(
new Ad(ad.title, ad.description, ad.ownerId, ad.imageSrc, ad.promo, key)
)
})
commit('loadAds', resultAds)
commit('setLoading', false)
} catch (error) {
commit('setError', error.message)
commit('setLoading', false)
throw (error)
}
}

[Alex]

Александр, мне не помогло
помогло вот это из коммента raf22 спасибо вам
const imageSrc = await fb.storage().ref().child(fileData.ref.fullPath).getDownloadURL()

Answer 1

[raf22]

// const imageSrc = fileData.metadata.downloadURLs[0]
const imageSrc = await fb.storage().ref().child(fileData.ref.fullPath).getDownloadURL()
Мне это помогло.

Comments

[obbteam]

Чел, спасибо что ты есть<3

[николай тамазенко]

Чел ты гуру .... Спасссссссссссссс

[Anton_io]

Этот способ работает, но у меня не сохранялось imageSrc в базе данных, помогло следущее -

const imageSrc = await fb.storage().ref().child(fileData.ref.fullPath).getDownloadURL()

await fb.database().ref('ads/' + ad.key).set({
...newPost,
imageSrc: imageSrc
})

[TiiGRus]

Красавела! Спасибо.

[Сергей Бурдужа]

Спасибо тебе огромное.

Answer 2

[dRemi]

этот код работает, и fb импортируется немного по-другому
import fb from 'firebase/app';
import 'firebase/database';
import 'firebase/storage';

Comments

[Radiss]

dRemi Доброго времени) А у Вас не было такой ошибки?

Reference.push failed: first argument contains undefined in property 'ads.ownerId'

[Павел]

Radiss, у меня была, если еще актуально)))