javascript - 从表单将文件添加到 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 上传完成时调用

要获取下载网址，您需要 checkin 第三个观察者

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

     })