從表單將文件添加到vue.js中的Firebase存儲中

Question

我正在嘗試使用vue.js將圖像添加到Firebase存儲中
我的代碼編譯了如何將我沒有獲得任何結果的數據添加到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

在函數uploadTask.on(eventName, firstObserver, secondObserver, thirdObserver)

每次狀態更改時都會調用firstObserver

secondObserver是錯誤觀察器​​，在失敗時被調用

上傳完成thirdObserver調用thirdObserver

要獲取下載網址，您需要簽入第3個觀察者

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

除了ittus的答案外，請注意，在saveNewAticle()方法中，您正在調用兩個異步操作（ add()和put() ），而沒有鏈接它們。

由於您在完成數據庫寫操作后（即，當add()方法返回的promise解析后）離開了當前網頁（使用this.$router.push("/"); ），因此您可以離開該頁面在完成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);
        });

      }