欢迎访问响应式SPA SSR网站!

English
原创前端技术博客,致力于分享前端学习路上的第一手资料。专注 web 前端开发、移动端开发、前端工程化、前端职业发展,做最有价值的前端技术学习网站。

前端·小阳仔

关注互联网和前端开发技术的博客网站!

当前位置: 导航  >  前端小知识  >  文章详情

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

发布时间:2024-03-19   作者:富朝阳    我要评论我要评论

问题

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

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

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

问题根因

ant design vue 的上传组件属性。

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

原生上传file属性

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

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

解决方案

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

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

 总结

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

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

往期回顾

猜你喜欢
  • 前端性能优化9大策略(面试一网打尽)!
    前端性能优化9大策略(面试一网打尽)!
    wonderful
  • 解决angualr13 form表单设置disabled不起作用问题
    解决angualr13 form表单设置disabled不起作用问题
    wonderful
  • 什么是变量提升?var、let 及 const 区别?什么是暂时性死区?
    什么是变量提升?var、let 及 const 区别?什么是暂时性死区?
    wonderful
  • Webpack性能优化
    Webpack性能优化
    wonderful
  • CSS实现三种常用的三角形效果
    CSS实现三种常用的三角形效果
    wonderful
  • vite构建打包性能优化
    vite构建打包性能优化
    wonderful

给我留言

专注于程序员工作、学习、编程提效。

Copyright © www.code-nav.top All Rights Reserved.

前端小阳仔 提供技术支持 备案号:陕ICP备19013504号

LOADING