[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：