Vue.js调用Spring控制器上传多文件时List<MultipartFile>为空

问题根源 #

1. 手动设置Content-Type导致boundary缺失：当你手动指定'Content-Type': 'multipart/form-data'时，Axios不会自动生成multipart请求必需的boundary分隔符，Spring无法正确解析请求体结构。
2. body参数未正确序列化：@RequestPart("body")接收的是JSON格式的Request对象，但直接append普通JS对象会被转成[object Object]字符串，Spring无法解析为对应的Java实体类。

修复后的代码 #

前端Vue.js（Axios）代码 #

const bodyFormData = new FormData();
// 将Request对象序列化为JSON字符串，包装成Blob并指定类型
bodyFormData.append('body', new Blob([JSON.stringify(etc)], { type: 'application/json' }));
// 保持相同参数名追加多个文件
bodyFormData.append('attached_files', file_1, 'file_1.pdf');
bodyFormData.append('attached_files', file_2, 'file_2.pdf');

return axios.post(
  `url`,
  bodyFormData,
  // 移除手动设置的Content-Type，让Axios自动处理
  { headers: {} }
);

关键注意事项 #

• 不要手动设置Content-Type：Axios发送FormData时会自动生成包含boundary的正确请求头（格式为multipart/form-data; boundary=----WebKitFormBoundaryxxxx），这是Spring解析多部分请求的核心前提。
• 正确序列化body参数：通过Blob包装JSON字符串并指定application/json类型，Spring的@RequestPart才能识别并将其解析为对应的Java Request对象。

验证方式 #

• 打开浏览器开发者工具的Network面板，检查请求头是否包含带boundary的Content-Type；
• 查看请求体，确认body部分是标准JSON格式，attached_files存在两个文件条目。

内容的提问来源于stack exchange，提问作者John Garez