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

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

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

一、基本类型

例:

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

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

二、对象类型

Java代码：

import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

class User {
    String name;
    int age;

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public int getAge() {
        return age;
    }

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

@RestController
@RequestMapping(value={"/example"})
public class Example {

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

}

前端数据：

name: 'xiaoming'
age: 18

三、复杂情况

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

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

上代码…

public class CLS1 {
    int id;
    public int getId() {
        return id;
    }
    public void setId(int id) {
        this.id = id;
    }
}
/***********************/
public class CLS2 {
    String name;
    public String getName() {
        return name;
    }
    public void setName(String name) {
        this.name = name;
    }
}
/***********************/
import java.util.ArrayList;

public class Wrapper {
    CLS1 cls1;
    ArrayList<CLS2> cls2List;
    public CLS1 getCls1() {
        return cls1;
    }
    public void setCls1(CLS1 cls1) {
        this.cls1 = cls1;
    }
    public ArrayList<CLS2> getCls2List() {
        return cls2List;
    }
    public void setCls2List(ArrayList<CLS2> cls2List) {
        this.cls2List = cls2List;
    }
}
/***********************/
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

import java.util.ArrayList;

@RestController
@RequestMapping(value={"/example"})
public class Example {
    @RequestMapping(value={"/complex"})
    public void complexType(Wrapper wrapper) {
        CLS1 cls1 = wrapper.getCls1();
        ArrayList<CLS2> cls2s = wrapper.getCls2List();
    }

}

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

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

四、前端格式化工具类

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

function objToFd(obj, form, name) {
  const fd = form || new FormData()

  if (typeof obj !== 'object' || obj instanceof File) {
    fd.append(name, obj)
    return fd
  }

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

  for (const prop in obj) {
    // 判断是自己的属性 且不为空
    if (prop != null && obj.hasOwnProperty(prop) && obj[prop] != null && obj[prop] !== '') {
      const val = obj[prop]
      if (val instanceof Array) {
        // 如果是数组
        val.map((item, index) => {
          objToFd(item, fd, keyName + prop + '[' + index + ']')
        })
      } else {
        objToFd(val, fd, keyName + prop)
      }
    }
  }

  return fd
}

测试：

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 (var pair of fd.entries()) {
  console.log(pair[0] + ': ' + pair[1])
}

/*******            输出          *******/
k1: k1-v
k2: 345
k3.k31[0]: 1
k3.k31[1]: 2
k3.k31[2].k313: k313-v
k3.k32.k321: k321-v
k3.k32.k322: true
k3.k32.k323[0]: con
k3.k32.k323[1]: ff
k6[0]: m
k6[1]: d
k6[2]: z
k6[3]: z