试图获取 Firebase 上传进度——uploadTask.on 不是函数答案

【问题标题】：attempting to get Firebase upload progress -- uploadTask.on not a function试图获取 Firebase 上传进度——uploadTask.on 不是函数
【发布时间】：2017-11-01 05:12:14
【问题描述】：

我正在尝试获取 Firebase 上传的进度，但我尝试查看状态的函数显然是在错误的对象类型上调用的：

Uncaught TypeError: uploadTask.on is not a function
    at VueComponent.submitUpload (eval at 100 (:8080/1.346d5d05d7c5f84c45e7.hot-update.js:7), <anonymous>:231:15)
    at boundFn (eval at <anonymous> (app.js:808), <anonymous>:125:14)
    at VueComponent.invoker (eval at <anonymous> (app.js:808), <anonymous>:1659:18)
    at VueComponent.Vue.$emit (eval at <anonymous> (app.js:808), <anonymous>:1930:16)
    at VueComponent.handleClick (eval at <anonymous> (app.js:1765), <anonymous>:6448:13)
    at boundFn (eval at <anonymous> (app.js:808), <anonymous>:125:14)
    at HTMLButtonElement.invoker (eval at <anonymous> (app.js:808), <anonymous>:1659:18)

这是我上传文件的方式：

 submitUpload: function(){
     var files = this.$refs.upload.uploadFiles;
     var storageRef = storage.ref();
     var pdfsRef = storageRef.child('files');
     var file = files[0]['raw'];
     var name = files[0]['name'];
     var fileref = storageRef.child(name);
     var self = this;
     var uploadTask = fileref.put(file).then(function(snapshot){
     console.log(name + ' is the filename');
     console.log('uploaded');
     var url = snapshot.downloadURL;
     self.gettext(url, name);
     });
     uploadTask.on('state_changed', function(snapshot){
     // Observe state change events such as progress, pause, and resume
     // Get task progress, including the number of bytes uploaded and the total number of bytes to be uploaded
     var progress =  (snapshot.bytesTransferred / snapshot.totalBytes) * 100;
     console.log('upload progress is: ' + progress);
     switch (snapshot.state) {
         case firebase.storage.TaskState.PAUSED: // or 'paused'
         console.log('Upload is paused');
         break;
         case firebase.storage.TaskState.RUNNING: // or 'running'
         console.log('Upload is running');
         break;
     }
     }, function(error) {
     // Handle unsuccessful uploads
     }, function() {
     // Handle successful uploads on complete
     // For instance, get the download URL: https://firebasestorage.googleapis.com/...
         var downloadURL = uploadTask.snapshot.downloadURL;
     });
 },

谁能告诉我为什么uploadTask 变量没有此功能可用，我该如何纠正这个问题？我怀疑这是异步性的问题，但我不确定如何等到uploadTask 是正确的对象类型来观察其状态。

【问题讨论】：

标签： javascript firebase asynchronous upload firebase-storage

【解决方案1】：

声明：

var uploadTask = fileref.put(file).then(...);

将then() 返回的Promise 分配给uploadTask，而不是您想要的UploadTask。

将语句改为：

var uploadTask = fileref.put(file);
uploadTask.then(...);

【讨论】：

【解决方案2】：

自 2017 年以来的一些更新。put 方法产生一个快照属性 task，它允许您观察状态变化。

let uploadTask = fileRef.put(_imageBlobInfo.imgBlob);

uploadTask.task.on('state_changed', function(snapshot: any){
  // Observe state change events such as progress, pause, and resume
  // Get task progress, including the number of bytes uploaded and the total number of bytes to be uploaded
  var progress = (snapshot.bytesTransferred / snapshot.totalBytes) * 100;
  console.log('Upload is ' + progress + '% done');
   switch (snapshot.state) {
     case this.afStorage.storage.TaskState.PAUSED: // or 'paused'
     console.log('Upload is paused');
     break;
     case this.afStorage.storage.TaskState.RUNNING: // or 'running'
     console.log('Upload is running');
     break;
   }
}, function(error) {
  reject(error);
}, function() {
  resolve(uploadTask.task.snapshot);
});

【讨论】：