实现同时上传文件和表单json数据的解决方案 - 掘金

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

• 前端

复制
let formData = new FormData();

let file = document.getElementById("file").files[0];
formData.append("file", file);

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();

formData.append("files",fileList);

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

• 解决方案

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

2. formData方法append和set区别

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

复制
formData.get("name"); 
formData.getAll("name"); 



formData.append("k1", "v1");
formData.append("k1", "v2");

formData.get("k1"); 
formData.getAll("k1"); 



formData.append("k1", "v1");
formData.set("k1", "1");
formData.getAll("k1"); 


formData.has("k1"); 


formData.delete("k1");