在formdata中傳遞復(fù)雜參數(shù)時(shí),很頭疼,期望是一個(gè)樣子,結(jié)果到了后臺(tái)又是另一個(gè)樣子,介紹幾個(gè)基本的formdata格式
傳遞一個(gè)普通的對(duì)象obj:{name:'testname',age:'testage'}
需要寫成這個(gè)樣子
‘obj[name]’:'testname'
‘obj[age]’:'testage'
傳遞一個(gè)數(shù)組arr:['name','age','sex']
需要寫成這個(gè)樣子
'arr[]':'name'
'arr[]':'age'
'arr[]':'sex'
此時(shí)有這樣一個(gè)結(jié)構(gòu),怎么傳,一個(gè)個(gè)寫出來,想死的心都有了,而且還會(huì)涉及到文件的異步上傳(不然不會(huì)用formdata),所以找了個(gè)方法,總結(jié)一下:數(shù)組會(huì)加上[],對(duì)象會(huì)寫成這樣obj[property]
var params = {
name:'testname',
obj:{
innername:'innername',
innerage:23,
inneraddress:[
{
city:'shanghai',
area:'pudong'
},
{
city:'jiangsu',
area:'nanjing'
},
]
}
}
var objectToFormData =function(obj, form, namespace) {
var fd = form || new FormData();
var formKey;
if(obj instanceof Array){
for(var item of obj ){
if(typeof item === 'object' && !(item instanceof File)){
this.objectToFormData(item, fd, namespace+'[]');
}else{
// 若是數(shù)組則在關(guān)鍵字后面加上[]
fd.append(namespace+'[]',item)
}
}
}else{
for(var property in obj) {
if(obj.hasOwnProperty(property) && obj[property]) {
if(namespace) {
// 若是對(duì)象,則這樣
formKey = namespace + '[' + property + ']';
} else {
formKey = property;
}
// if the property is an object, but not a File,
// use recursivity.
if(typeof obj[property] === 'object' && !(obj[property] instanceof File)) {
// 此處將formKey遞歸下去很重要,因?yàn)閿?shù)據(jù)結(jié)構(gòu)會(huì)出現(xiàn)嵌套的情況
this.objectToFormData(obj[property], fd, formKey);
} else {
// if it's a string or a File object
fd.append(formKey, obj[property]);
}
}
}
}
return fd;
};
測(cè)試一些,解析出來的數(shù)據(jù)結(jié)構(gòu)傳到后臺(tái)和我們預(yù)期的結(jié)果一樣:
[keys:]
name
obj[innername]
obj[innerage]
obj[inneraddress][][city]
obj[inneraddress][][area]
obj[inneraddress][][city]
obj[inneraddress][][area]
[values]:
testname
innername
23
shanghai
pudong
jiangsu
nanjing