嘗試獲取Firebase上傳進度 - uploadTask.on不是函數

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由then()返回Promise，而不是你想要的UploadTask。

更改聲明：

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