谈谈form-data请求格式

谈谈form-data请求格式

表单的 enctype 等于 multipart/form-data,因为该值默认值为application/x-www-form-urlencoded。

FormData对象

XMLHttpRequest Level 2添加了一个新的接口FormData。利用FormData对象,我们可以通过JavaScript用一些键值对来模拟一系列表单控件,我们还可以使用XMLHttpRequest的send()方法来异步的提交这个"表单"。

var formData = new FormData();

formData.append("username", "Groucho");

formData.append("accountnum", 123456);

fetch('/users', {

method: 'POST',

body: formData

})

上面创建了一个FormData对象,通过fetch进行ajax请求时,会自动为其将其转为form-data格式,无需手动添加格式。

对象转FormData对象

对于FormDat对象,像上面那种形式可以直接添加参数比较方便,但是对于对象或者嵌套对象:

let userObj = {userName: ’xxx', age: '21'}

formData.append('user', userObj)

上面形式添加formData参数user,并不会获取到其真正的内容,而是返回userObj的Object.prototype.toString.call(userObj)的值作为user字段的值。

------WebKitFormBoundaryyb1zYhTI38xpQxBK

Content-Disposition: form-data; name="user"

[object Object]

遗憾的是,FormData对象没有像JSON.stringify那样的方法能批量将对象形式转换为对应的形式,formData而言是将对象的key转换为正确formData请求参数字段名,例如如下对象:

var obj = {

a: '2',

b: {c: 'test'},

c: [

{id: 1, name: 'xx'},

{id:2 ,name: 'yy', info: {d: 4} }

]

}

这样转换为FormData对象时,其对应的key应该是下面这样的:

a: 2

b[c]: test

c[][id]: 1

c[][name]: xx

c[][id]: 2

c[][name]: yy

c[][info][d]:4

这样,就需要我们自己手动来实现一个转换数据函数,具体代码如下:

function objectToFormData (obj, form, namespace) {

const fd = form || new FormData();

let formKey;

for(var property in obj) {

if(obj.hasOwnProperty(property)) {

let key = Array.isArray(obj) ? '[]' : `[${property}]`;

if(namespace) {

formKey = namespace + key;

} else {

formKey = property;

}

// if the property is an object, but not a File, use recursivity.

if(typeof obj[property] === 'object' && !(obj[property] instanceof File)) {

objectToFormData(obj[property], fd, formKey);

} else {

// if it's a string or a File object

fd.append(formKey, obj[property]);

}

}

}

return fd;

}

这样,就可以将对象转化为对应的formData的格式了。

参考

1、四种常见的 POST 提交数据方式

2、转换formdata参数格式

2、gist

3、fetch

更多创意

华为穿戴app怎么没有了(华为穿戴App找不到“华为手环 3 Pro”)
《真红之刃》罗兰城战终极攻略:策略与勇气的较量!
道场的由来与意义
365沙巴体育注册

道场的由来与意义

📅 07-21 🔥 6515