zoukankan      html  css  js  c++  java
  • [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'."

    关键代码如下:

    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:

    金麟岂是池中物,一遇风云便化龙!
  • 相关阅读:
    java中VO、PO、DTO 、DO、POJO、BO、TO
    java可变参数
    排序
    快速排序
    单元测试概述
    Spring 对事务管理的支持
    Spring的事务管理基础知识
    混合切面类型
    基于Schema配置切面
    Spring AOP @AspectJ进阶
  • 原文地址:https://www.cnblogs.com/ABKing/p/12445229.html
Copyright © 2011-2022 走看看