一、前端传递混合参数
-
使用
FormData
对象整合数据- 普通字段直接追加,嵌套对象需扁平化或序列化
- 文件通过
append()
添加,支持多文件上传
js
const formData = new FormData();
formData.append('user.name', 'John'); // 对象属性扁平化
formData.append('user.age', 25);
formData.append('avatar', fileInput.files); // 文件
formData.append('tags', JSON.stringify(['tech', 'web'])); // 数组需序列化
axios.post('/api/upload', formData, {
headers: { 'Content-Type': 'multipart/form-data' }
});
-
复杂对象处理
- 推荐将嵌套对象序列化为 JSON 字符串传递:
js
formData.append('config', JSON.stringify({ theme: "dark", notifications: true }));
二、后端接收方案(Spring Boot为例)
方案1:自动绑定实体对象 + @RequestParam
接收文件
js
@PostMapping("/upload")
public String upload(
@RequestParam("file") MultipartFile file, // 文件参数
User user // 自动绑定URL或表单字段到对象属性
) {
// user.name/user.age 自动填充
}
要求 :前端需将对象属性扁平化为 user.name
格式。
方案2: @RequestPart
接收JSON序列化对象
js
@PostMapping("/submit")
public String submit(
@RequestPart("file") MultipartFile file,
@RequestPart("data") String jsonData // 接收JSON字符串
) throws JsonProcessingException {
ObjectMapper mapper = new ObjectMapper();
MyObject obj = mapper.readValue(jsonData, MyObject.class);
}
适用场景:复杂嵌套对象。
方案3:混合注解接收
js
@PostMapping("/create")
public String create(
@RequestParam("file") MultipartFile file,
@RequestParam("name") String name,
@RequestParam("age") int age
) {
User user = new User(name, age); // 手动构建对象
}
优势:灵活性高,适合简单对象
三、关键注意事项
-
Content-Type 冲突
- 必须显式声明
multipart/form-data
,不可用@RequestBody
接收。
- 必须显式声明
-
文件大小限制
Spring Boot需配置
js
spring:
servlet:
multipart:
max-file-size: 10MB
max-request-size: 20MB
3. 中文乱码处理
后端需设置编码:
js
@Bean
public CommonsMultipartResolver multipartResolver() {
CommonsMultipartResolver resolver = new CommonsMultipartResolver();
resolver.setDefaultEncoding("UTF-8");
return resolver;
}
四、完整示例
前端代码(Vue + Axios)
js
const submit = () => {
const formData = new FormData();
formData.append('file', file.value);
formData.append('user', JSON.stringify({ name: 'John', age: 25 }));
axios.post('/api/submit', formData, {
headers: { 'Content-Type': 'multipart/form-data' }
});
};
后端代码(Spring Boot)
js
@PostMapping("/submit")
public ResponseEntity<String> handleSubmit(
@RequestPart("file") MultipartFile file,
@RequestPart("user") String userJson
) {
User user = objectMapper.readValue(userJson, User.class);
file.transferTo(new File("/uploads/" + file.getOriginalFilename()));
return ResponseEntity.ok("Success");
}