Question

我试图获取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是正确的对象类型来观察其状态。

Answer 1

声明：

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

将uploadTask Promise分配给then()，而不是UploadTask。

将声明更改为：

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

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

试图获取Firebase上传进度 - uploadTask.on不是一个函数

2 个答案: