从表单将文件添加到vue.js中的Firebase存储中

Question

I am trying to add an image to firebase storage using vue.js
my code compiles how I am not obtaining any results data is added to firestore I would like to get the download URL as well any suggestions

 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

In function uploadTask.on(eventName, firstObserver, secondObserver, thirdObserver)

firstObserver is call every time state change

secondObserver is error observer which is called on failure

thirdObserver is called when uploading completed

To get download url, you need to check in 3rd observer

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);
         });

     })

Answer 2

In addition to ittus' answer, be aware that in your saveNewAticle() method you are calling two asynchronous operations (the add() and the put() ) without chaining them.

Since you navigate away from the current web page (with this.$router.push("/"); ) when the database write is done (ie when the promise returned by the add() method resolves), you may leave the page before the Firebase Storage put() method is done.

To avoid this behaviour, you should chain your the promises returned by these two methods. Since you are only interested by knowing when the upload is complete you can use the then() method as follows (instead of listening for events with 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);
        });

      }