vue&axios通过FormData上传文件

1.需求

        vue项目中,通过axios或者二次封装的axios上传文件(图片,文档,工作表等)。后台接收FormData类型的数据。现在的项目一般来说后台接收数据为JSON字符串,接收文件为FormData表单。

2.分析

        一般来说,项目都会对axios进行二次封装。直接使用axios,或者自己二次封装axios的情况,应该对请求的各种配置比较清楚了。对axios和网络协议理解不充分并 直接使用其他人二次封装的axios 时多会对此有疑问,或者在上传文件时遇到障碍。因为二次封装的axios中的一些前置配置影响到了表单形式的提交。

3.解决方案

        先说下以表单形式发送的一些前置设置。
        一般我们首先需要一个表单标签,和input标签。这个表单标签的主要作用呢就是生成FormData类型的数据。一般我们有自己的上传文件按钮和预览文件盒子,所以我把原始input[type='file']隐藏了。注意:表单提交形式需要写好对应的name,作为后台读数据时键值对的键。

图1.标签设置

        js内把数据存为表单形式,将表单的Dom作为参数传入new FormData()中即可获得表单类型的数据。我们直接把这个FormData型的数据传递给后台即可。注意:FormData不能做JSON字符串转换。下图中的config是指请求头headers的设置

图2.取数据

        按理来说FormData数据正确,headers设置'Content-Type':'multipart/form-data'就可以正确传递了。这是最表面的设置也是最基本的设置,但是有些同志设置后还是不好用。那么我就要再强调一次,需要写好对应的name,FormData不能做JSON字符串转换.  写好name这个大家因该都理解,也是比较低级的错误。那我为什么要强调不能做字符串转换呢。一个原因是在后台在接收其他数据多为JSON字符串,另一个原因就是二次封装的axios可能包含了前置操作(字符串转换)

图3.前置操作

        如图3,红框内就是对传递的参数做前置操作(JSON字符串转换)。使用二次封装的axios时一定要查看是否有如上的代码,被这里代码做JSON字符串转换后,就会导致FormData无法正常提交。
        解决方案:1.不使用二次封装的axios,直接使用原型axios。
                          2.修改二次封装的axios,添加提交表单类型的情况处理。
ps.我二次封装过一个axios,包含了传递JSON,FormData,以及接收Blob的情况。
    详情可以阅读我的相关文章 axios二次封装
    ----(之后我又做了promise化的处理,更加方便了,写这篇文章时尚未添加。)
    或者查看我gitee上的源码 axios.js

转载到其他平台需含本文的简书链接

前端豆知识,很小却有用

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • FormData学习笔记 FormData对象: >通过FormData对象可以组装一组用 XMLHtt...
    johe_jianshu阅读 33,547评论 3 14
  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 12,223评论 4 61
  • �� 在这个功利的世界,充满无限欲望的我们,应该没有谁不想成为高手,唱歌演电影最好成为明星,女的成为孙俪,男的就成...
    合眼看世界阅读 699评论 2 3
  • 在这暴风雨的夜晚你还在外面作爱的旅行吗,我的朋友?天空像失望者在哀号。 我今夜无眠。我不断地开门向黑暗中瞭望,我的...
    朱忠国阅读 642评论 0 1
  • 小幸运认真呼唤白马 属于孩子气 的兵荒马乱 某分某秒 终于在伊甸园 开出漫天“我爱你” 来日 确认过你出席 方可以...
    朵鹿阅读 161评论 0 1