выгрузка и загрузка образов хранилищ в FireBase с VueJs - PullRequest
Новая
       18

выгрузка и загрузка образов хранилищ в FireBase с VueJs

0 голосов
/ 02 марта 2020

я создаю это простое приложение, используя Vue / vuex и firebase, где я хочу облегчить пользователям загрузку изображений, и как только приложение будет обновлено, эти изображения будут получены из хранилища firebase, модифицируя текущую базу данных новым загруженным изображением. Вот мой код: 

createMeet({ commit, getters }, payload) {
      const newMeet = {
        title: payload.title,
        description: payload.description,
        location: payload.location,
        date: payload.date,
        video_url: payload.video_url,
        idCreator: getters.getUser.id
      }
      let image_url;
      let key;
      firebase.database().ref('meetUps').push(newMeet)
        .then((data) => {
          console.log(data)
          key = data.key
          return key
        })
        .then(key => {
          const filename = payload.image.name
          const fileExtension = filename.slice(filename.lastIndexOf('.'))
          return firebase.storage().ref('meetUps/' + key + '.' + fileExtension).put(payload.image)
        })---the image get storaged in the firebase storage

        .then(fileData => {
          image_url = fileData.metadata.downloadURLs()
          return firebase.database().ref('meetUps/').child(key).update({ image_url: image_url })
        })--------->updating in the database the storaged object in there passing a new paranmeter
                    image_url, with a new value contained in variable iimage_url
        .then(() => {
          commit('meetsCreator', {
            ...newMeet,
            image_url: image_url,------------>putting changes in some mutation which modifies the state
            id: key,

          })
        })
        .catch(error => {
          console.log(error)
        })
      // commit('meetsCreator',newMeet)
    },

изображения получают pu sh в хранилище базы данных, но как только я пытаюсь изменить базу данных, добавление этого нового элемента (изображения) с помощью downloadUrls не работает. Любой совет, пожалуйста? .... заранее спасибо !!!

1 Ответ

1 голос
/ 02 марта 2020

Вам необходимо использовать метод getDownloadURL() из JavaScript SDK, который является асинхронным и возвращает Promise, который разрешается с помощью URL-адреса для загрузки.

Итак, следующее должно сделать трюк: 

  //...
  firebase.database().ref('meetUps').push(newMeet)
    .then(ref => {
      key = ref.key
      const filename = payload.image.name
      const fileExtension = filename.slice(filename.lastIndexOf('.'))
      return firebase.storage().ref('meetUps/' + key + '.' + fileExtension).put(payload.image)
    })
    .then(uploadTaskSnapshot => {
       return uploadTaskSnapshot.ref.getDownloadURL();
    .then(url => {
      return firebase.database().ref('meetUps/').child(key).update({ image_url: url })
    })
    //....
...