当前位置: 首页 >前端技术 > elementui自定义上传,使用axios上传FormData遇到的坑

elementui自定义上传,使用axios上传FormData遇到的坑

elementui 中 Upload 组件自定义上传基本配置就不说了,主要记录一下遇到的问题.

下面是最开始的写法:

elementui自定义上传,使用axios上传FormData遇到的坑 _ JavaClub全栈架构师技术笔记

 

 请求后服务器报 500 错误:

elementui自定义上传,使用axios上传FormData遇到的坑 _ JavaClub全栈架构师技术笔记

 

 网上找了一圈后发现是缺少了 boundary,这个是浏览器进行分割文件时需要到的分割符。手动添加后又服务器又报了 400 错误,说是文件未接收到,但是前端可以正常打印出文件。

 查阅资料发现,在上传文件时不需要手动设置"Content-type", "multipart/form-data",浏览器会自动识别设置请求头。然后尝试去掉手动设置的请求头,还是报了个 500 错误:

elementui自定义上传,使用axios上传FormData遇到的坑 _ JavaClub全栈架构师技术笔记

 

 发现请求头是这个:

elementui自定义上传,使用axios上传FormData遇到的坑 _ JavaClub全栈架构师技术笔记

 

 又网上查了一圈,还是没有解决问题。这时候就在想,会不会是 axios 的问题,就尝试用 ajax 来写一下,结果请求居然成功了。。。

elementui自定义上传,使用axios上传FormData遇到的坑 _ JavaClub全栈架构师技术笔记

 

 那就是 axios 中的配置问题了,然后网上查找了关于 ajax 与 axios 上传 FormData 格式的区别,找到了一篇文章说是 axios 在内部进行了处理,所以在上传前需要使用 transformRequest 转换一下格式,更改代码后能够请求成功: 

elementui自定义上传,使用axios上传FormData遇到的坑 _ JavaClub全栈架构师技术笔记

  

以上是记录一下此问题的处理过程。

 

参考文章:https://blog.csdn.net/weixin_34413802/article/details/88722992

 

作者:Qinkoo
来源链接:https://www.cnblogs.com/kuzao/p/15768146.html

版权声明:
1、JavaClub(https://www.javaclub.cn)以学习交流为目的,由作者投稿、网友推荐和小编整理收藏优秀的IT技术及相关内容,包括但不限于文字、图片、音频、视频、软件、程序等,其均来自互联网,本站不享有版权,版权归原作者所有。

2、本站提供的内容仅用于个人学习、研究或欣赏,以及其他非商业性或非盈利性用途,但同时应遵守著作权法及其他相关法律的规定,不得侵犯相关权利人及本网站的合法权利。
3、本网站内容原作者如不愿意在本网站刊登内容,请及时通知本站(javaclubcn@163.com),我们将第一时间核实后及时予以删除。





本文链接:https://www.javaclub.cn/front/112517.html

标签:Axios
分享给朋友:

“elementui自定义上传,使用axios上传FormData遇到的坑” 的相关文章

HTML5结构标签 2022年05月16日 21:18:49
JavaScript基础之函数与作用域(二) 2022年05月16日 21:21:22
CSS a标签样式 2022年05月17日 21:04:01
React.js 的 Web 应用场景有哪些 2022年05月31日 23:18:44
浏览器对css 伪类 hover的支持 2022年06月03日 21:56:28
HTML5 速查列表 2022年06月04日 23:21:45
Html5基础及部分常用标签介绍 2022年06月09日 20:21:28
html的a标签disabled禁用处理 2022年06月10日 20:16:47
html5的input类型和所有属性详解 2022年06月11日 20:30:15