1 Вопрос: хранилище firebase не работает, если код не был изменен при горячей перезагрузке в vuejs2

вопрос создан в Thu, May 2, 2019 12:00 AM

Я создаю приложение для загрузки изображений. Детали изображения хранятся в пожарном магазине и успешно извлекаются. Имя изображения затем используется для создания пути для хранилища Firebase. Однако функция Firebase.storage.ref(...path).getDownloadURL() не выполняется вообще, включая обратный вызов .then(...) или .catch(...). Если код не изменен в созданном методе во время работы «npm run serve». Заранее спасибо.

Использование Firebase версии 5.11.0 на npm 6.4.1 и узле v10.15.3 на компьютере под управлением Ubuntu 19. Vue-cli версия 3.7.0. Также использует eslint

import firebase from 'firebase';

export default {
  name:'imageView',
  props: ["imaGes"],
  data(){
    return{
      imageURLs:[]
    }
  },
  created(){
    console.log('start')
    var storage = firebase.storage();
    this.imaGes.forEach(iMaGe => {
      //console.log(iMaGe.image_name)
    var storageRef = storage.ref('images_img/'+iMaGe.image_name);
    console.log('reference completee')
    storageRef.getDownloadURL().then(url =>{
      //console.log('bo')
      const data = url;
      this.imageURLs.push(data);
      //console.log('get completed')
      //console.log('hi')
    })
    .catch(err=>{
      console.log(err)
    })
    });
    console.log('completed')
  }
}

Массив imageURL должен быть заполнен URL-адресами для загрузки из Firebase Storage.

    
1
1 ответ                              1                         

Вам необходимо использовать Promise.all() для параллельного выполнения вызовов асинхронного метода getDownloadURL().

import firebase from 'firebase';

export default {
  name:'imageView',
  props: ["imaGes"],
  data(){
    return{
      imageURLs:[]
    }
  },
  created(){
    console.log('start')
    var storage = firebase.storage();

    const promises = [];

    this.imaGes.forEach(iMaGe => {
      var storageRef = storage.ref('images_img/'+iMaGe.image_name);
      console.log('reference completee')
      promises.push(storageRef.getDownloadURL());
    });

    return Promise.all(promises)   
    .then(results => {
        this.imageURLs = results;
    })
    .catch(err=>{
       console.log(err)
    });
  }
}

Обратите внимание также на опечатку в iMage.image_name.

    
0
2019-05-02 15: 41: 42Z
  1. Спасибо за помощь, но я попробовал, и проблема все еще существует, однако функция Promise.all () разрешает, однако возвращает нулевой набор при первоначальной компиляции. Однако, когда сайт загружается в горячем режиме и вносятся какие-либо изменения, заполненный массив возвращается назад
    2019-05-03 07: 15: 56Z
  2. Вы видите какую-либо ошибку в консоли?
    2019-05-03 08: 52: 06Z
  3. в консоли нет ошибок или выходных данных, кроме операторов console.log ()
    2019-05-03 09: 53: 04Z
  4. Вы уверены, что реквизиты правильно переданы и что у вас правильное значение this.imaGes? Что вы получаете, если вы делаете console.log(this.imaGes); до forEach?
    2019-05-03 09: 54: 49Z
  5. да, как я уже говорил, все отлично работает с синтаксическим анализом и отправкой, даже если я просто изменяю символ в функции, когда страница уже запущена на сервере разработки URL получен
    2019-05-03 10: 17: 19Z
источник размещен Вот