一、‌前端传递混合参数‌

1. ‌使用 FormData 对象整合数据‌

   • 普通字段直接追加，嵌套对象需扁平化或序列化
   • 文件通过 append() 添加，支持多文件上传

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' } });

1. ‌复杂对象处理‌

   • 推荐将嵌套对象序列化为 JSON 字符串传递：

formData.append('config', JSON.stringify({ theme: "dark", notifications: true }));

二、‌后端接收方案（Spring Boot为例） ‌

方案1：‌自动绑定实体对象 + @RequestParam 接收文件

@PostMapping("/upload") public String upload( @RequestParam("file") MultipartFile file, // 文件参数 User user // 自动绑定URL或表单字段到对象属性 ) { // user.name/user.age 自动填充 }

要求‌：前端需将对象属性扁平化为 user.name 格式‌。

方案2：‌ @RequestPart 接收JSON序列化对象

@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：‌混合注解接收

@PostMapping("/create") public String create( @RequestParam("file") MultipartFile file, @RequestParam("name") String name, @RequestParam("age") int age ) { User user = new User(name, age); // 手动构建对象 }

‌优势‌：灵活性高，适合简单对象‌

三、‌关键注意事项‌

1. ‌Content-Type 冲突‌

   • 必须显式声明 multipart/form-data，不可用 @RequestBody 接收‌。

2. ‌文件大小限制‌
   Spring Boot需配置

spring: servlet: multipart: max-file-size: 10MB max-request-size: 20MB

‌3. 中文乱码处理‌
后端需设置编码：

@Bean public CommonsMultipartResolver multipartResolver() { CommonsMultipartResolver resolver = new CommonsMultipartResolver(); resolver.setDefaultEncoding("UTF-8"); return resolver; }

四、‌完整示例‌

前端代码（Vue + Axios）

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）

@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"); }