axios 提交 application/x-www-form-urlencoded

最近工作比较忙 , 喜欢上了用有道云做笔记 , 写博客就是为了记录自己的学习的点点滴滴 , 如果能对其他人有帮助当然最好了 , 我一定要将这个习惯进行下去 .. .....

我们以前的前后交互方式一般只有(get 和 post)

只是突然间有个工程师写了个接收表单的方式的数据 , 忽然就懵逼了 , 死活传不过去 , 人家也接收不到 , 一直就是格式不对

先复习一下

action：url 地址，服务器接收表单数据的地址

method：提交服务器的http方法，一般为post和get

name：最好好吃name属性的唯一性

enctype: 表单数据提交时使用的编码类型，默认使用"pplication/x-www-form-urlencoded"

，如果是使用POST请求，则请求头中的content-type指定值就是该值。如果表单中有上传文件，编码类型需要使用

"multipart/form-data"，类型，才能完成传递文件数据。

encodeURIComponent 这个方法很有用 , 这个可以转换特殊字符 , 不过好像是 ''=" 和空格转完是相同的 (我们后台接收解析后是想等的) , 这个我也不太清楚 , 我们是约定好将等号转换为其他字符解决的 , 取巧了

但是实用 , url会转换汉字的但是如果在get带参数的时候不手动转 , 特殊字符是不会被转的 , 比如#号 , 遇到你就知道了

重点是:

post：enctype 默认"application/x-www-form-urlencoded"对表单数据进行编码，数据以键值对在http请求体重发送给服务器；如果enctype 属性为"multipart/form-data"，则以消息的形式发送给服务器。

但是我们在vue里面直接提交的是一个对象 , 根本不是这个玩意

所以我们要借助node 里面的 qs

qs和JSON 差不多

const Qs = require('qs');

然后把这个东西传给后端就好了 Qs.stringify(obj) 记得改axios 的请求格式

headers: {

'content-type': 'application/x-www-form-urlencoded'

}

第二种方式最简单的方法

var formData = new FormData();

formData.append('dsc',dsc);

formData.append('file',file你的文件对象);