добавление файлов в хранилище firebase в vue.js из форм

Question

Я пытаюсь добавить изображение в хранилище firebase, используя vue.js
мой код компилирует, как я не получаю никаких результатов, данные добавляются в firestore. Я хотел бы получить URL-адрес для загрузки, а также любые предложения

 methods: {
    saveNewAticle() {
      db
        .collection("storys")
        .add({
          title: this.title,
          summary: this.summary,
          article: this.article

        })
        .then(docRef => {
          console.log("Client added: ", docRef.id);
          this.$router.push("/");
        })
        .catch(error => {
          console.error("Error adding employee: ", error);
        });
       //links ref
       //https://firebase.google.com/docs/storage/web/start

      var storageref= storage.ref()
      var thumbnailref  = storageref.child ("images")
      var file = thumbnail  
      var uploadTask = storageRef.child('images/${file}').put(file)
      uploadTask
      .on(firebase.storage.TaskEvent.STATE_CHANGED,
       function(snapshot) {

                // /Upload completed successfully, now we can get the download URL
          uploadTask.snapshot.ref.getDownloadURL().then(function(downloadURL) {
            console.log('File available at', downloadURL);
          });

      })


    }

  }

Answer 1

В дополнение к ответу ittus учтите, что в вашем методе saveNewAticle() вы вызываете две асинхронные операции (add() и put()), не связывая их в цепочку.

Поскольку вы уходите с текущей веб-страницы (с this.$router.push("/");) , когда запись в базу данных завершена (т. Е. Когда разрешается обещание, возвращенное методом add()), вы можетепокиньте страницу до того, как метод Firebase Storage put() будет завершен.

Чтобы избежать такого поведения, вы должны связать свои обещания, возвращенные этими двумя методами.Поскольку вас интересует только знание о завершении загрузки, вы можете использовать метод then() следующим образом (вместо прослушивания событий с on()):

      saveNewAticle() {

        db
        .collection("storys")
        .add({
            title: this.title,
            summary: this.summary,
            article: this.article
        })
        .then(docRef => {

            console.log("Client added: ", docRef.id);

            var storageref = storage.ref()
            var thumbnailref = storageref.child("images")
            var file = thumbnail
            var uploadTask = storageRef.child('images/${file}').put(file)

            return uploadTask;

        })
        .then(uploadTaskSnapshot => {

            return uploadTaskSnapshot.ref.getDownloadURL();

        })
        .then(downloadURL => {

            console.log('File available at', downloadURL);
            this.$router.push("/");

        })
        .catch(error => {
            console.error("Error adding employee: ", error);
        });

      }

Answer 2

В функции uploadTask.on(eventName, firstObserver, secondObserver, thirdObserver)

firstObserver - это вызов при каждом изменении состояния

secondObserver - это наблюдатель ошибок, который вызывается при ошибке

thirdObserverвызывается при завершении загрузки

Чтобы получить URL-адрес загрузки, вам необходимо зарегистрироваться у третьего наблюдателя

uploadTask
     .on(firebase.storage.TaskEvent.STATE_CHANGED,
      function() {},
      function() {},
      function(snapshot) {

               // /Upload completed successfully, now we can get the download URL
         uploadTask.snapshot.ref.getDownloadURL().then(function(downloadURL) {
           console.log('File available at', downloadURL);
         });

     })