[Vue warn]: Error in v-on handler: "TypeError: Failed to execute 'readAsDataURL' on 'FileReader': parameter 1 is not of type 'Blob'."

今天在使用Vue進行文件上傳的代碼編寫時，發現報錯：

[Vue warn]: Error in v-on handler: "TypeError: Failed to execute 'readAsDataURL' on 'FileReader': parameter 1 is not of type 'Blob'."

關鍵代碼如下：

test(file){
     const fr = new FileReader();
     fr.readAsDataURL(file);
     fr.onload = function(){
          console.log(fr.result);
     };
},

 

顯然，是第五行中傳入的file對象出了問題，根據報錯提示，我們應該傳入一個Blob對象。也就是說，file不是Blob對象

我們使用console.log(file)進行調試輸出：

我一眼就發現，raw這個屬性寫了個大大的File。那么，如果我傳入file.raw，會不會就是這個readAsDataUrl()所需要的Blob對象呢？

代碼修改如下：

test(file){
    const fr = new FileReader();
    fr.readAsDataURL(file.raw);
    fr.onload = function(){
    console.log(fr.result);
    };
},

 

果然，控制台成功輸出了DataUrl：