首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

TypeError:未能对“FileReader”执行“readAsDataURL”:参数%1不是“Blob”类型

这个错误是由于参数不是“Blob”类型而导致的。在JavaScript中,FileReader对象的readAsDataURL方法用于读取指定的Blob或File对象,并将其转换为DataURL。而在这个错误中,传递给readAsDataURL方法的参数不是一个有效的Blob对象。

要解决这个错误,需要确保传递给readAsDataURL方法的参数是一个有效的Blob对象。Blob对象是一种表示二进制数据的数据类型,通常用于处理文件数据。

以下是解决这个错误的一些步骤:

  1. 确保传递给readAsDataURL方法的参数是一个有效的Blob对象。可以使用console.log打印参数的类型,确保它是一个Blob对象。
  2. 如果参数不是一个Blob对象,可以尝试将其转换为Blob对象。可以使用Blob构造函数将数据转换为Blob对象,或者使用其他方法获取有效的Blob对象。
  3. 确保传递给readAsDataURL方法的参数是一个有效的文件对象。如果参数是一个文件路径或文件名,可以使用File对象或者其他方法获取有效的文件对象。
  4. 检查代码中是否存在其他错误或逻辑问题,可能导致传递给readAsDataURL方法的参数不正确。

总结: TypeError:未能对“FileReader”执行“readAsDataURL”:参数%1不是“Blob”类型的错误是由于传递给readAsDataURL方法的参数不是一个有效的Blob对象而导致的。要解决这个错误,需要确保传递给readAsDataURL方法的参数是一个有效的Blob对象,并且检查代码中是否存在其他错误或逻辑问题。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

面试题:我现在上传图片的时候提前预览到图片怎么办?

下面只看第一种的实现 //构造函数来构建 var blob = new Blob(array[optional], options[optional]); 构造函数,接受两个参数 第一个参数:为一个数据序列...第二个参数:用于指定将要放入Blob中的数据的类型(MIME)(后端可以通过枚举MimeType,获取对应类型 Blob对象的基本属性: size :Blob对象包含的字节数。...FileReader.readAsDataURL 和URL.createObjectURL区别 1、返回值 FileReader.readAsDataURL(blob)可以得到一段base64的字符串...,代表的是个二进制 URL.createObjectURL(blob)得到的是一个blob开头url地址 指向的是这个二进制地址 3、内存清理 FileReader.readAsDataURL(blob...、执行方式 FileReader.readAsDataURL(blob)通过回调的方式f返回,异步执行; URL.createObjectURL(blob) 直接返回,同步执行; 5、多个文件 FileReader.readAsDataURL

1.5K10

带你入门前端工程(四):测试

(abs(-1)).toBe(1) expect(() => abs('abc')).toThrow(TypeError) // 类型错误 }) 现在我们需要测试一下 abs() 函数:在 src...(abs(-1)).toBe(1) expect(() => abs('abc')).toThrow(TypeError) // 类型错误 }) 上图表示每一项覆盖率都是 100%。...Branch:分支覆盖率,是否执行了每个分支。 Funcs:函数覆盖率,是否执行了每个函数。 Lines:行覆盖率,是否执行了每一行代码。 可能有人会有疑问,1 和 4 不是一样吗?...第二段代码对应的覆盖率: 它们执行的语句都是一样,但第一段代码 Lines 覆盖率更低,因为它有一行代码没执行。...而第二段代码执行的语句和判断语句是在同一行,所以 Lines 覆盖率为 100%。

1.6K10

手把手教你前端本地文件操作与上传

使用FileReader除了可读取为base64之外,还能读取为以下格式: fileReader.readAsDataURL(this.files[]); // 以二进制字符串方式读取,结果是二进制内容的...}); 上面代码把blob打印出来是这样的: 能得到它的大小和类型,但是具体内容也是不可见的,它有一个slice的方法,可用于切割大文件。...=function(){ console.log(this.result); } fileReader.onerror=function(err){ console.log(err); } fileReader.readAsDataURL...链接的,除了上面提到的img之外,另外一个很常见的是video标签,如youtobe的视频就是使用的blob: 这种数据不是直接在本地的,而是通过持续请求视频数据,然后再通过blob这个容器媒介添加到video...常用的POST编码是application/x-www-form-urlencoded,它和GET一样,发送的数据里面,参数参数之间使用&连接,如: key1=value1&key2=value2 特殊字符做转义

1.8K110

前端本地文件操作与上传

对象 console.log(this.files[0]); // base64方式读取 fileReader.readAsDataURL(this.files[0]); }); 把原始的File...,所以你应该需要再判断一下图片格式,如可以把判断改成: /^image\/[jpeg|png|gif]/.test(this.type) 然后实例化一个FileReader,调它的readAsDataURL...使用FileReader除了可读取为base64之外,还能读取为以下格式: fileReader.readAsDataURL(this.files[0]); // 以二进制字符串方式读取,结果是二进制内容的...); // 改变mime类型 xhr.responseType = "blob"; xhr.onload = function () { // response就是一个Blob对象 console.log...常用的POST编码是application/x-www-form-urlencoded,它和GET一样,发送的数据里面,参数参数之间使用&连接,如: key1=value1&key2=value2 特殊字符做转义

1.5K20

富媒体在客服IM消息通信中的秒发实践

三、解决方案与成效 1、将fileReader.target.result作为视频的url在页面渲染 最初使用的方式是在视频上传CDN时,同时截取视频首帧,然后将截取的视频首帧也上传到CDN,再通过长链...可以看一下1M的视频文件,通过readAsDataURL(file)读取文件内容得到是一个data:url的base64字符串,用这个字符串进行渲染,等于在页面加了一个1.4M的字符串内容,如下图所示,...五、知识扩展 1、文件读取的实现差异 URL.createObjectURL() 和FileReader.readAsDataURL(file)都可以取到文件的信息,为什么我们选择使用前者而非后者?...(blob)获会创建一个DOMString,其中有包含了文件信息的URL(指定的 File 对象或 Blob 对象) 执行的时机的不同: createObjectURL是立即的执行 FileReader.readAsDataURL...进行内存释放; FileReader.readAsDataURL返回的是base64的字符串,比blob url消耗更多的内存,不过这个数据会通过垃圾回收机制自动清除。

1.4K61

JS魔法堂之实战:纯前端的图片预览

二、准备功夫1──FileReader                           FileReader是HTML5的新特性,用于读取Blob和File类型的数据。具体的用法如下: (1)....属性 readyState:类型为unsigned short,FileReader实例的当前状态,(EMPTY——0,还没有加载任何数据;LOADING——1,数据正在加载;DONE——2,已完成全部的读取请求...当没有执行读取操作时,调用该方法会抛DOM_FILE_ABORT_ERR异常。...readAsArrayBuffer(Blob blob):读取数据,result属性被设置为ArrayBuffer类型 readAsText(Blob blob [, encoding='utf-8']...):读取数据,result属性被设置为String类型 readAsBinaryString(Blob blob):读取数据,result属性被设置为原始二进制数据 readAsDataURL(Blob

2.3K60

前端实现本地图片读取与简单压缩功能

属性: readyState:FileReader 当前的状态,有三种值,0-还未开始读取数据;1-正在读取数据;2-数据读取完成 result:在读取完成后才会存在的属性,值是读取到的文件的内容 onload...:文件读取完成后触发的事件 error:读取文件时的错误信息 常用方法: readAsDataURL:将 File 或 Blob 读取为一个 base64 编码的 URL 字符串 readAsText:...读取 File 或 Blob 的文本内容,第二个参数可以指定编码类型,默认 utf-8 abort:取消读取的操作 需要注意的是, 和 都是异步的,必须监听 或者在 事件中才能获取到读取到的结果,...关于这一步,在开头的链接中,也就是上一篇文章已经说过了,在本文中不再赘述: 代码实现 需要注意的几点: 方法是 canvas 上下文环境的方法,而不是 canvas 元素的方法,这个方法可以接收多个参数...格式;第二个参数是导出的品质系数,范围为 0-1,默认 0.92,但是这个系数只对导出类型为 jpeg 和 webp 的图片生效

1.5K80

HTML5中的拖放功能

欢迎关注加我vx:xiaoda0423,欢迎点赞、收藏和评论 不要害怕做梦,但是呢,也不要光做梦,要做一个实干家,而不是空谈家,求真力行。 ?...如:FileList对象,File对象,Blob接口,FileReader接口 增加的标签特性 在html5中file类型的表单元素增加了multiple特性和accept特性 multiple特性...对象没有字节数,则为0 第二,type属性,表示Blob对象的MIME类型,未知 类型,则返回一个 空字符串。...LOADING,值为1,表示有读取文件的方法正在读取 File 对象 或 Blob 对象,且没有错误发生。...>); // 读取为文本,encoding 为文本的编码方式 第四,readAsDataURL()方法 将文件读取为 DataURL 字符串: readAsDataURL(); // 读取为

2.6K10

JS中Buffer数据详解

mime type作为元数据 ​ 它们都可以借助 FileReaderBlob读取为更为实用的数据类型去使用 readAsArrayBuffer() readAsBinaryString() readAsDataURL...创建读取文件的对象 var reader = new FileReader() readAsDataURL(Blob|File) 读取文件并将文件以数据URI的形式保存在result属性中,...第一个参数是一个包含实际数据的数组 第二个参数是数据的类型 这两个参数不是必需的 var arr = ["hello", "world"] var Blob = new Blob(arr, { "type...(文件上传时可以在前端判断文件类型是否合适) gbk编码: 数字字母 一字节 1KB= 1024字节 一中文汉字是 2字节 UTF-8编码: 数字字母 一字节 1KB= 1024字节 一个中文汉字是...3字节 ​ Silce 读取部分内容 ​ 有时候我们读取一部分而不是全部内容,Filereader对象支持一个slice( )方法,在火狐中用mozSlice( ),在chrome中webkitSilde

6.4K30

JS学习笔记,持续记录

函数参数不是必需的, JavaScript 允许省略参数。 但是, 没有办法只省略靠前的参数, 而保留靠后的参数。 如果一定要省略靠前的参数, 只有显式传入 undefined 。...URL.createObjectURL(blob)和FileReader.readAsDataURL(file)很相似: 1.区别 通过FileReader.readAsDataURL(file)可以获取一段...data:base64的字符串 通过URL.createObjectURL(blob)可以获取当前文件的一个内存URL 2.执行时机 createObjectURL是同步执行(立即的) FileReader.readAsDataURL...FileReader.readAsDataURL则返回包含很多字符的base64,并会比blob url消耗更多内存,但是在不用的时候会自动从内存中清除(通过垃圾回收机制) 兼容性方面两个属性都兼容ie10...优劣对比: 使用createObjectURL可以节省性能并更快速,只不过需要在不使用的情况下手动释放内存 如果不太在意设备性能问题,并想获取图片的base64,则推荐使用FileReader.readAsDataURL

77040
领券