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

已于 2024-03-19 13:37:13 修改
阅读量1k 收藏 11
点赞数 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
版权

我的博客原文：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？什么是点击劫持？如何防御

富朝阳
关注
  • 21
    点赞
  • 踩
  • 11
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
Vue 报错TypeError: this.$set is not a function 的解决方法
12-12
报错场景：将APi中得到的response数据，用Vue$set()使数据动态响应 报错代码： methods: { textTranslate: function (text, to) { $.ajax({ url: 'http://openapi.youdao.com/api', type: 'post', dataType: 'jsonp', data: { q: text, appKey: this.appKey, salt: this.salt, from: this.from, to:
#报错解决#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: '
（存入json文件出错）TypeError: Object of type int64 is not JSON serializable
01-20
问题描述 因为numpy的int类型无法被json化,所以需要将numpy的int转为原生类型。 解决方案 # pandas返回的 sex_cnt = marks['sex'].value_counts() type(sex_cnt['男']) # numpy.int64 # 3种转化方法 # examples using a.item() type(np.float32(0).item()) # type(np.float64(0).item()) # type(np.uint32(0).item()) # # examples using np.asscalar(a) type(np.a
Failed to execute ‘observe‘ on ‘MutationObserver‘: parameter 1 is not of type ‘Node‘
Sakuraaaaaaa的博客
09-18 4300
需要先引入element-ui再引入瀑布流插件，参考的博客 解决方法
ailed to execute ‘readAsText‘ on ‘FileReader‘: parameter 1 is not of type ‘Blob‘.“
m0_52364694的博客
04-03 3081
使用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 ‘readAsText‘ on ‘FileReader‘: parameter 1 is not of type ‘Blob‘.的解决方法
qqqweiweiqq的博客
10-21 641
让它返回blob类型 大概是这样子的。
#报错解决#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
Failed to execute ‘readAsBinaryString‘ on ‘FileReader‘: parameter 1 is not of type ‘Blob‘.报错解决
最新发布
jiangjunyuan168的博客
11-15 1335
在使用 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等方式却依旧没有解决。多次调试后发现是因为
Failed to execute ‘readAsBinaryString‘ on ‘FileReader‘: parameter 1 is not of type ‘Blob‘.“
weixin_43290709的博客
03-22 7190
element-ui上传文件时的file经过了包装： 所以使用的时候要用file.raw p.s 根据不同情况，“raw”可能为其他名称，以此类推即可。
vue 文件上传 Failed to execute ‘readAsBinaryString’ on ‘FileReader ‘: parameter 1 is not of type ‘Blob‘
Joie_Z的博客
02-25 1万+
踩坑日常： Failed to execute 'readAsBinaryString’ on 'FileReader ': parameter 1 is not of type ‘Blob’ 我使用的是ant design vue 的上传组件，上传的时候报这个错，查了很多资料都没能实际解决。后来看到一篇博文（博主使用的是elementUI上传组件）说是要获取原生文件（应该是这么形容吧），然后我就仔细找了一下。真的发现了原来我写代码的时候没有提取到与原生文件。（原博文我忘记在哪看到了，感谢博主！！！！）
实习总结——js语法
admvli2016的博客
08-24 647
1，JS 调用apply报错：Getting error CreateListFromArrayLike called on non-object when trying to use .apply() 在网上找了找，说是因为apply第二个参数没有传输数组: 但我确实是传的数组，为什么会报错？console.log输出一下发现打印结果里面有一个“，”字符串，好吧，是自己粗心大意，前面...
Vue常见错误---Error in mounted hook
热门推荐
tang
04-11 1万+
Error in mounted hook
el-upload 上传图片 Failed to execute ‘readAsDataURL‘ on ‘FileReader‘【bug修复】
ss_Tina的博客
04-13 3079
el-upload上传图片转base64报错解决，el-upload 上传图片，读取文件成base64的时候，报错解决
Reading files in JavaScript using the File APIs
太阳火神的美丽人生
05-29 1512
Reading files in JavaScript using the File APIsBy Eric BidelmanPublished: June 18th, 2010Comments: 273IntroductionHTML5 finally provides a standard way to interact with local files, via the File APIsp
JavaScript专精系列(6)——FileReader 文件读取
mapbar_front的博客
11-25 8810
FileReader是前端进行文件处理的一个重要的Api，特别是在对图片的处理上，如果你想知道图片的处理原理，你就永远不可能绕过它。 文件处理是一系列的流程，每一步我们都需要知道，自己能做什么，自己做了什么。 第一步，获取文件前端中，获取文件必须使用input标签。<input id='file' type='file' />
Ajax方式上传文件报错"Uncaught TypeError: Illegal invocation"
weixin_34032792的博客
06-10 844
今天使用ajax上传文件时，出现了错误。数据传输的方式是通过定义formData完成的，提交的文件对象也设置为dom对象，但是还是不能发送请求。F12看到后台报了个错误：Uncaught TypeError: Illegal invocation，百度了一下，找到了解决方法。 解决方法：在ajax请求的参数中添加如下两个参数： $.ajax({ ..., process...
【已解决】在react+ts中 atnd 用 upload 组件报错Failed to execute ‘readAsArrayBuffer,param 1 is notof type Blob
超逸の学习技术博客
09-27 2196
今天在公司做 excel 导入文件的时候发现每次上传都会报这个错误： Uncaught TypeError: Failed to execute 'readAsArrayBuffer' on 'FileReader': parameter 1 is not of type 'Blob' 现在解决了，用简单的话语总结一下： 因为 antd 会对原生文件上传包装一下： 拿着个属性值就好了： originFileObj 最后解决了问题，完美。 ...
TypeError: Failed to execute 'readAsArrayBuffer' on 'FileReader': parameter 1 is not of type 'Blob'
05-23
这个错误通常是因为传递给 `readAsArrayBuffer()` 方法的参数不是 `Blob` 类型。请确保传递给该方法的参数是有效的 `Blob` 对象。你可以使用 `File` 对象创建一个 `Blob` 对象，如下所示： ```javascript const file = document.querySelector('input[type=file]').files[0]; const reader = new FileReader(); reader.readAsArrayBuffer(new Blob([file])); ``` 如果你仍然遇到问题，请检查代码中传递给 `readAsArrayBuffer()` 方法的参数是否正确。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

富朝阳

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

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

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

打赏作者

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

抵扣说明：

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

余额充值