### 如何在Spring Boot中接收FormData格式上传的对象 #### 创建实体类 为了能够处理`multipart/form-data`类型的请求，在Java端需要定义相应的实体类来映射前端发送的数据结构。假设有一个简单的用户资料更新场景，其中包含用户的个人信息（如姓名、年龄）以及一张个人照片。 ```java public class UserProfile { private String name; private int age; @NotNull(message="Photo cannot be null") private MultipartFile photo; // Getters and Setters... } ``` 此代码片段展示了如何通过引入`MultipartFile`类型作为成员变量的一部分来表示待上传的文件[^3]。 #### 配置控制器方法 接下来是在Spring MVC控制器里编写用于接受上述表单提交的方法： ```java @RestController @RequestMapping("/api/user") public class UserController { @PostMapping(value="/upload", consumes=MediaType.MULTIPART_FORM_DATA_VALUE) public ResponseEntity<String> handleFileUpload(@ModelAttribute UserProfile userProfile){ try{ // Process the uploaded file here. System.out.println("Name: " + userProfile.getName()); System.out.println("Age: " + userProfile.getAge()); if(userProfile.getPhoto() != null && !userProfile.getPhoto().isEmpty()){ byte[] bytes = userProfile.getPhoto().getBytes(); // Save or process these bytes as needed. return new ResponseEntity<>("Successfully uploaded!", HttpStatus.OK); }else{ throw new RuntimeException("Failed to upload."); } }catch(Exception e){ return new ResponseEntity<>(e.getMessage(), HttpStatus.INTERNAL_SERVER_ERROR); } } } ``` 这里的关键在于使用了`@ModelAttribute`注解而不是常见的`@RequestBody`，因为后者适用于JSON等非多部分内容类型的请求体解析；而前者则更适合用来绑定HTML表单字段到命令对象上[^4]。 另外需要注意的是设置了`consumes`属性指定只响应特定媒体类型的POST请求——即`multipart/form-data`，这正是浏览器默认为带有文件输入项的标准HTTP POST所使用的编码方式[^1]。 #### 客户端示例 (React) 对于客户端而言，则需构建一个支持文件选择并能发起正确格式化请求的组件。下面给出一段基于React框架下的简易实现方案： ```jsx import React, { useState } from 'react'; import axios from 'axios'; function FileUploader(){ const [formData, setFormData] = useState({ name:"", age:0, selectedFile:null }); function handleChange(event){ let value = event.target.type === 'file' ? event.target.files[0] : event.target.value; setFormData({...formData,[event.target.name]:value}); }; async function handleSubmit(event){ event.preventDefault(); var formDataToSend = new FormData(); Object.keys(formData).forEach(key=>{ formDataToSend.append(key, formData[key]); }) await axios.post('/api/user/upload', formDataToSend,{ headers:{ 'Content-Type': 'multipart/form-data' } }).then(response => console.log(response.data)) .catch(error=>console.error('There was an error!',error)); } return ( <form onSubmit={handleSubmit}> Name:<input type='text' name='name' onChange={handleChange} /><br/> Age:<input type='number' name='age' onChange={handleChange}/><br/> Photo:<input type='file' name='photo' onChange={handleChange}/><br/> <button type="submit">Submit</button> </form> ); } export default FileUploader; ``` 这段JavaScript代码实现了基本的表单交互逻辑，并利用Axios库向服务器发出异步请求。特别之处在于它创建了一个新的`FormData`实例并将所有表单项追加进去，从而确保最终发送出去的内容符合预期的要求。