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

• 前端

复制 1
 2let formData = new FormData();
 3
 4let file = document.getElementById("file").files[0];
 5formData.append("file", file);
 6
 7let imageInfo = {
 8    "width": "240",
 9    "height": "320"
10};
11
12formData.append('imageInfo', new Blob([JSON.stringify(imageInfo)], {type: "application/json"}));

• 后端

复制 1@PostMapping("upload")
 2public ImageInfo upload(@RequestPart("file") MultipartFile file,@RequestPart("imageInfo") ImageInfo imageInfo) {
 3    System.out.println(imageInfo);
 4    return imageInfo;
 5}

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

• 错误代码

复制 1let formData = new FormData();
 2
 3formData.append("files",fileList);

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

• 解决方案

复制 1
 2fileList.forEach(d=>{
 3    formData.append("files",d);
 4})

2. formData方法append和set区别

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

复制 1
 2formData.get("name"); 
 3formData.getAll("name"); 
 4
 5
 6
 7formData.append("k1", "v1");
 8formData.append("k1", "v2");
 9
10formData.get("k1"); 
11formData.getAll("k1"); 
12
13
14
15formData.append("k1", "v1");
16formData.set("k1", "1");
17formData.getAll("k1"); 
18
19
20formData.has("k1"); 
21
22
23formData.delete("k1");