今天在使用Vue进行文件上传的代码编写时,发现报错:
[Vue warn]: Error in v-on handler: "TypeError: Failed to execute 'readAsDataURL' on 'FileReader': parameter 1 is not of type 'Blob'."
关键代码如下:
1 test(file){ 2 const fr = new FileReader(); 3 fr.readAsDataURL(file); 4 fr.onload = function(){ 5 console.log(fr.result); 6 }; 7 },
显然,是第五行中传入的file对象出了问题,根据报错提示,我们应该传入一个Blob对象。也就是说,file不是Blob对象
我们使用console.log(file)进行调试输出:
我一眼就发现,raw这个属性写了个大大的File。那么,如果我传入file.raw,会不会就是这个readAsDataUrl()所需要的Blob对象呢?
代码修改如下:
1 test(file){ 2 const fr = new FileReader(); 3 fr.readAsDataURL(file.raw); 4 fr.onload = function(){ 5 console.log(fr.result); 6 }; 7 },
果然,控制台成功输出了DataUrl: