项目需求，实现通过一个后端接口同时接收form表单数据和文件。

一、前后端伪代码

• 前端

//构建formData
let formData = new FormData();
//文件部分
let file = document.getElementById("file").files[0];
formData.append("file", file);
//json数据部分
let imageInfo = {
    "width": "240",
    "height": "320"
};
//这里包装 可以直接转换成对象
formData.append('imageInfo', new Blob([JSON.stringify(imageInfo)], {type: "application/json"}));

• 后端

@PostMapping("upload")
public ImageInfo upload(@RequestPart("file") MultipartFile file,@RequestPart("imageInfo") ImageInfo imageInfo) {
    System.out.println(imageInfo);
    return imageInfo;
}

二、记录踩过的坑

1. 选择多个文件一起上传

• 错误代码

let formData = new FormData();
//fileList是文件数组
formData.append("files",fileList);

浏览器network调试面板中可看到发送的files参数为[object file]形式，而正确的形式应该是[binary]

• 解决方案

//循环多次向formData中同一个键名下添加一个文件即可。
fileList.forEach(d=>{
    formData.append("files",d);
})

2. formData方法append和set区别

• 通过append(key, value)来添加数据
  • 如果指定的key不存在则会新增一条数据，如果key存在，则添加到数据的末尾
• 通过set(key, value)来设置修改数据
  • 如果指定的key不存在则会新增一条，如果存在，则会修改对应的value值

三、总结formData方法

// 1、获取值：通过get(key)/getAll(key)来获取对应的value
formData.get("name"); // 获取key为name的第一个值
formData.getAll("name"); // 返回一个数组，获取key为name的所有值

// 2、添加数据：通过append(key, value)来添加数据
// 如果指定的key不存在则会新增一条数据，如果key存在，则添加到数据的末尾
formData.append("k1", "v1");
formData.append("k1", "v2");

formData.get("k1"); // "v1"
formData.getAll("k1"); // ["v1","v2","v3"]

// 3、设置修改数据：set(key, value)来设置修改数据
// 如果指定的key不存在则会新增一条，如果存在，则会修改对应的value值
formData.append("k1", "v1");
formData.set("k1", "1");
formData.getAll("k1"); // ["1"]

// 4、判断是否存在对应数据：has(key)来判断是否对应的key值
formData.has("k1"); // true

// 5、删除数据
formData.delete("k1");