formdata传递参数_使用FormData格式在前后端传递数据

为什么一定要使用formdata格式……很大原因是因为当时我犯蠢……

前端肯定是JS了，具体不写了，使用Postman测试，后端语言是Java，框架Spring Boot，使用IntelliJ IDEA

一、基本类型

例:

可以看到form-data只能传递键值对形式。

简单类型直接传递就可以了。

二、对象类型

Java代码：

importorg.springframework.web.bind.annotation.RequestMapping;importorg.springframework.web.bind.annotation.RestController;classUser {

String name;intage;publicString getName() {returnname;

}public voidsetName(String name) {this.name =name;

}public intgetAge() {returnage;

}public void setAge(intage) {this.age =age;

}

}

@RestController

@RequestMapping(value={"/example"})public classExample {

@RequestMapping(value={"/user"})public voidobjectType(User user) {return;

}

}

前端数据：

name: 'xiaoming'age:18

三、复杂情况

行吧……直接说我遇到的问题，接收一个对象和一个对象数组。

同时接收两个参数时不可能的(至少我没发现)，首先要建一个对象包含这两个参数。

上代码…

public classCLS1 {intid;public intgetId() {returnid;

}public void setId(intid) {this.id =id;

}

}/***********************/

public classCLS2 {

String name;publicString getName() {returnname;

}public voidsetName(String name) {this.name =name;

}

}/***********************/

importjava.util.ArrayList;public classWrapper {

CLS1 cls1;

ArrayListcls2List;publicCLS1 getCls1() {returncls1;

}public voidsetCls1(CLS1 cls1) {this.cls1 =cls1;

}public ArrayListgetCls2List() {returncls2List;

}public void setCls2List(ArrayListcls2List) {this.cls2List =cls2List;

}

}/***********************/

importorg.springframework.web.bind.annotation.RequestMapping;importorg.springframework.web.bind.annotation.RestController;importjava.util.ArrayList;

@RestController

@RequestMapping(value={"/example"})public classExample {

@RequestMapping(value={"/complex"})public voidcomplexType(Wrapper wrapper) {

CLS1 cls1=wrapper.getCls1();

ArrayList cls2s =wrapper.getCls2List();

}

}

重点在于前端的数据格式：

cls1.id: 233cls2List[0].name: 'hello'cls2List[1].name: 'world'

四、前端格式化工具类

前端手打肯定很麻烦，写了一个对象转formdata键值对的函数，自己试了下没什么问题，有没有bug就不知道了……

functionobjToFd(obj, form, name) {

const fd= form || newFormData()if (typeof obj !== 'object' || obj instanceofFile) {

fd.append(name, obj)returnfd

}

const keyName= name ? name + '.' : ''

for (const prop inobj) {//判断是自己的属性 且不为空

if (prop != null && obj.hasOwnProperty(prop) && obj[prop] != null && obj[prop] !== '') {

const val=obj[prop]if (val instanceofArray) {//如果是数组

val.map((item, index) =>{

objToFd(item, fd, keyName+ prop + '[' + index + ']')

})

}else{

objToFd(val, fd, keyName+prop)

}

}

}returnfd

}

测试：

let data ={

k1:"k1-v",

k2:345,

k3: {

k31: [1, 2, { k313: 'k313-v'}],

k32: {

k321:'k321-v',

k322:true,

k323: ['con', 'ff']

}

},

k4:'',

k5: undefined,

k6: ['m', 'd', 'z', 'z']

}

const fd=objToFd(data);for (varpair of fd.entries()) {

console.log(pair[0] + ': ' + pair[1])

}/******* 输出 *******/k1: k1-v

k2:345k3.k31[0]: 1k3.k31[1]: 2k3.k31[2].k313: k313-v

k3.k32.k321: k321-v

k3.k32.k322:truek3.k32.k323[0]: con

k3.k32.k323[1]: ff

k6[0]: m

k6[1]: d

k6[2]: z

k6[3]: z

以上全是自己在网上查资料&瞎试出来了，不保证准确性。