尝试获取Firebase上传进度-uploadTask.on不是函数 [英] attempting to get Firebase upload progress -- uploadTask.on not a function

问题描述

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

I'm trying to get the progress of a Firebase upload but the function I'm trying to watch the state with is apparently being called on the wrong object type:

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)

这是我上传文件的方式:

Here's how I'm uploading the file:

 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是观察其状态的正确对象类型.

Can anyone tell me why the uploadTask variable doesn't have this function available, and how I can correct this? I suspect it's a problem with asynchronicity but I'm not sure how to wait until uploadTask is the right object type to watch its state.

推荐答案

语句:

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

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

assigns to uploadTask the Promise returned by then(), instead of the UploadTask you want.

将语句更改为:

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

这篇关于尝试获取Firebase上传进度-uploadTask.on不是函数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！