TypeError: Failed to execute ‘readAsText‘ on ‘FileReader‘: parameter 1 is not of type ‘Blob‘.

已于 2024-03-19 13:37:13 修改
阅读量1.7k 收藏 12
点赞数 21
分类专栏： 错误处理 Vue 文章标签： 前端 javascript anti-design-vue 文件上传
于 2024-01-22 07:30:00 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/chaoperson/article/details/135734347
版权
开发者在使用VueAntDesign的上传组件时遇到`readAsText`错误，发现原因在于组件提供的`file`属性并非原生`Blob`。解决方案是通过`.originFileObj`获取原文件并提交给后台。文章讨论了这个问题的解决方案和背景，以及相关前端技术的注意事项。
摘要由CSDN通过智能技术生成

我的博客原文：TypeError: Failed to execute ‘readAsText‘ on ‘FileReader‘: parameter 1 is not of type ‘Blob‘. 

问题

最近在开发一个免费的在线Markdown功能，使用的是ant design vue 的上传组件，上传的时候遇到这样一个报错，TypeError: Failed to execute 'readAsText' on 'FileReader': parameter 1 is not of type 'Blob'。

 查了很多资料都没能实际解决。后来我去对比了组件库的file属性和原生文件的属性，两者居然不一致，查看上传组件属性才发现了问题根因。

问题根因

ant design vue 的上传组件属性。

原生上传file属性

file属性和原生文件的属性，两者居然不一致。 

解决方案

ant组件给原生文件外面又包了一层，所以其实.originFileObj才是最后需要提交给后台的。所以我们把这个提交给后台就不会报错啦！

 总结

vue ant design (elementui) 导入excel或者其他文件的时候，获取到的不是原生file文件，需要把ant design包装后的文件换成原生file。upload组件通过change事件的参数file，file.originFileObj即可获取原文件。 

你的问题解决了吗？欢迎大家在评论区交流。如果文章对你有所帮助，❤️关注+点赞❤️鼓励一下！博主会持续更新。。。。

往期回顾

 css实现元素居中的6种方法 

Angular8升级至Angular13遇到的问题

前端vscode必备插件(强烈推荐)

Webpack性能优化

vite构建如何兼容低版本浏览器

前端性能优化9大策略（面试一网打尽）！

vue3.x使用prerender-spa-plugin预渲染达到SEO优化

 vite构建打包性能优化

 vue3.x使用prerender-spa-plugin预渲染达到SEO优化

 ES6实用的技巧和方法有哪些？

 css超出部分显示省略号

vue3使用i18n 实现国际化

vue3中使用prismjs或者highlight.js实现代码高亮

什么是 XSS 攻击？什么是 CSRF？什么是点击劫持？如何防御

富朝阳
关注
专栏目录
Failed to execute ‘readAsText‘ on ‘FileReader‘: parameter 1 is not of type ‘Blob‘.的解决方法
qqqweiweiqq的博客
10-21 899
让它返回blob类型 大概是这样子的。
vue3 - 详解报错TypeError: Failed to execute ‘insertBefore‘ on ‘Node‘: parameter 1 is not of type ‘Node‘.
高级前端工程师
07-27 2970
vue3，nuxt3，vite，报错，TypeError: Failed to execute ‘insertBefore‘ on ‘Node‘: parameter 1 is not of type 'Node'.，节点报错，vue3 insertBefore，打包，运行，编译，dom元素，渲染，路由router，组件components，vue3生产环境跳转路由报错，浏览器控制台报错，百度地图使用报错，报错爆红，vue项目报错，插入节点insertBefore()报错，vue3 用global.prod
#报错解决#TypeError Failed to execute ‘readAsText‘ on ‘FileReader‘ parameter 1 is not of type ‘Blob‘
m0_67402341的博客
03-12 1万+
问题描述 在实现需求：批量下载的时候，返回的数据类型设置为blob $http({ method: 'post', url: dataurl, data: bodyParam, headers: { 'Content-Type': 'application/jsons', }, responseType: '
Failed to execute ‘readAsBinaryString‘ on ‘FileReader‘: parameter 1 is not of type ‘Blob‘.报错解决
jiangjunyuan168的博客
11-15 2225
在使用 FileReader 对象读取文件的时候产生了下图报错：代码： 原因 产生该报错的原因是 readAsBinaryString 方法传入的不是 Blob 对象。readAsBinaryString 方法传入的必须是一个 Blob 对象。打印一下自己传入的对象，作者由于使用了 elementui 上传组件，传入 readAsBinaryString 方法内的 file 对象是经过 elementui 封装过的，下图打印可以看到，file.raw 属性才是真正的文件 Blob 对象，所以传入 file.
Failed to execute ‘readAsArrayBuffer‘ on ‘FileReader‘: parameter 1 is not of type ‘Blob‘
热门推荐
xiao_cheng_的博客
11-10 1万+
Failed to execute ‘readAsArrayBuffer’ on ‘FileReader’: parameter 1 is not of type ‘Blob’ 在vue中使用FileReader时遇到Failed to execute ‘readAsArrayBuffer’ on ‘FileReader’: parameter 1 is not of type 'Blob’的报错，尝试了new Int8Array、readAsArrayBuffer等方式却依旧没有解决。多次调试后发现是因为
#报错解决#TypeError: Failed to execute ‘readAsText‘ on ‘FileReader‘: parameter 1 is not of type ‘Blob‘.
老衲的少女心i~
09-17 1万+
项目场景： 问题描述： TypeError: Failed to execute 'readAsText' on 'FileReader': parameter 1 is not of type 'Blob'. 原因分析： 提示：这里填写问题的分析： 例如：Handler 发送消息有两种方式，分别是 Handler.obtainMessage()和 Handler.sendMessage()，其中 obtainMessage 方式当数据量过大时，由于 MessageQuene 大小也有限，所以当 me
layui下载 parameter 1 is not of type ‘Blob‘.
想搞全栈的前端
11-17 967
layui parameter 1 is not of type ‘Blob’. 原因： 开启了mock数据 解决： 关闭mock数据
chunk-TF6X5W6F.js?v=8e314eb4:2329 Uncaught TypeError: Failed to execute 'readAsText' on 'FileReader': parameter 1 is not of type 'Blob'
最新发布
10-23
这个错误信息是在JavaScript中发生的，当你尝试使用`FileReader` API 的 `readAsText()` 方法读取文件内容，但是提供的参数不是一个Blob对象时。`Blob` (Binary Large Object) 是一种表示二进制数据的内置对象，通常...
vue编辑表格报错 Failed to execute ‘getComputedStyle‘ on ‘Window‘: parameter 1 is not of type ‘Element‘.
X_W123的博客
12-04 7769
vue table报错
Uncaught TypeError: Failed to execute ‘addEventListener‘（监听事件），on ‘EventTarget‘: 2 arguments require
IT_CRH的博客
04-19 5920
关于：Uncaught TypeError: Failed to execute 'addEventListener' on 'EventTarget': 2 arguments required, but only 1 present.的处理
ailed to execute ‘readAsText‘ on ‘FileReader‘: parameter 1 is not of type ‘Blob‘.“
m0_52364694的博客
04-03 3141
使用readAsText读取文件时，readAsText第一个参数不是文件而是选择文件后得到的原生文件对象 File {name: "test.png", lastModified: 1648716710500, lastModifiedDate: Thu Mar 31 2022 16:51:50 GMT+0800 (中国标准时间), webkitRelativePath: "", size: 368268, …} lastModified: 1648716710500 lastModifiedDate:
Failed to execute ‘readAsBinaryString‘ on ‘FileReader‘: parameter 1 is not of type ‘Blob‘.“
weixin_43290709的博客
03-22 7263
element-ui上传文件时的file经过了包装： 所以使用的时候要用file.raw p.s 根据不同情况，“raw”可能为其他名称，以此类推即可。
PLUPLOAD 上传 FAILED TO EXECUTE ‘READASDATAURL‘ ON ‘FILEREADER‘: PARAMETER 1 IS NOT OF TYPE ‘BLOB‘
不负韶华梦为马
12-28 1120
在做一个客服系统到上传图片时，需要获取图片md5，遇到这个错误。解决方法：读取原生对象。
【已解决】在react+ts中 atnd 用 upload 组件报错Failed to execute ‘readAsArrayBuffer,param 1 is notof type Blob
超逸の学习技术博客
09-27 2510
今天在公司做 excel 导入文件的时候发现每次上传都会报这个错误： Uncaught TypeError: Failed to execute 'readAsArrayBuffer' on 'FileReader': parameter 1 is not of type 'Blob' 现在解决了，用简单的话语总结一下： 因为 antd 会对原生文件上传包装一下： 拿着个属性值就好了： originFileObj 最后解决了问题，完美。 ...
实习总结——js语法
admvli2016的博客
08-24 856
1，JS 调用apply报错：Getting error CreateListFromArrayLike called on non-object when trying to use .apply() 在网上找了找，说是因为apply第二个参数没有传输数组: 但我确实是传的数组，为什么会报错？console.log输出一下发现打印结果里面有一个“，”字符串，好吧，是自己粗心大意，前面...
Failed to execute ‘observe‘ on ‘MutationObserver‘: parameter 1 is not of type ‘Node‘
Sakuraaaaaaa的博客
09-18 4458
需要先引入element-ui再引入瀑布流插件，参考的博客 解决方法
vue 图片转base64格式方法总结
江咏之
02-11 8058
直入主题，上代码（其实用的还是FileReader） 主要方法 handleRemove(file, fileList) { console.log(file); var reader = new FileReader(); reader.readAsDataURL(file.raw); // 一定要传入file格式 reader.onload = () => { console.log("file 转 base64结
Ajax方式上传文件报错"Uncaught TypeError: Illegal invocation"
weixin_34032792的博客
06-10 879
今天使用ajax上传文件时，出现了错误。数据传输的方式是通过定义formData完成的，提交的文件对象也设置为dom对象，但是还是不能发送请求。F12看到后台报了个错误：Uncaught TypeError: Illegal invocation，百度了一下，找到了解决方法。 解决方法：在ajax请求的参数中添加如下两个参数： $.ajax({ ..., process...
多图片文件的上传
qq_40421803的博客
02-20 374
在上传文件时,有时候会遇到想要多种类型图片的区分上传 例:在做商品管理上传时,想在提交时,上传缩略图一类,详细信息图一类,而这两块在提交的时候,如果不区分开的话,提交时会全部发到后台,而不能产生区分(功能点是在后端对前端页面提供一个http地址直接通过地址访问图片,而缩略图所在的部分和详细图所在的部分是分开存储的,所以要区分上传) 实现方法: 前端: ①在图片的上传时就需要区分,在react中就在...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

富朝阳

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值