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

【问题标题】：adding files to firebase storage in vue.js from forms从表单将文件添加到 vue.js 中的 Firebase 存储
【发布时间】：2019-05-16 07:22:27
【问题描述】：

我正在尝试使用 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);
          });

      })


    }

  }

【问题讨论】：

标签： javascript firebase web vue.js firebase-storage

【解决方案1】：

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

firstObserver 是每次状态变化时调用

secondObserver 是失败时调用的错误观察器

上传完成时调用thirdObserver

要获取下载地址，您需要签入第三个观察者

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

     })

【讨论】：

【解决方案2】：

除了 ittus 的回答之外，请注意，在您的 saveNewAticle() 方法中，您正在调用两个异步操作（add() 和 put()）而不链接它们。

由于您离开当前网页（使用this.$router.push("/");）当数据库写入完成时（即当add() 方法返回的承诺解决时），您可以离开页面之前 Firebase 存储put() 方法完成。

为避免这种行为，您应该将这两种方法返回的 Promise 链接起来。由于您只对知道上传何时完成感兴趣，您可以使用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);
        });

      }

【讨论】：