React向Spring传文件数据失败：@RequestParam/@RequestPart无数据求助

核心问题分析 #

你的代码存在两个关键错误：

1. React端axios请求未传递构建好的FormData，而是直接传了原始的saveData对象
2. 手动设置Content-Type: multipart/form-data会导致axios无法自动生成正确的boundary，进而让Spring无法解析请求体

分步解决方案 #

1. 修正React端请求代码 #

// 构建业务数据对象
const saveData = {
  boardWriter: sessionStorage.getItem("memberID"),
  boardTitle: title,
  boardContents: contents
};

// 构建FormData实例
const formData = new FormData();
// 将JSON对象转为字符串后加入FormData，指定媒体类型
formData.append("saveData", JSON.stringify(saveData), {
  type: "application/json"
});
formData.append("boardFile", file);

// 发送请求：传递formData，无需手动设置Content-Type（axios会自动处理）
axios.post("http://localhost:8080/api/board/write", formData)
  .then(res => res.data)
  .catch(err => console.log(err));

2. 优化Spring Controller配置 #

确保BoardDTO类具备无参构造方法和所有字段的getter/setter（Spring依赖这些完成JSON反序列化），同时明确指定接口接收的媒体类型：

import org.springframework.http.MediaType;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestPart;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.multipart.MultipartFile;

@RestController
public class BoardController {

    @PostMapping(value = "/write", consumes = MediaType.MULTIPART_FORM_DATA_VALUE)
    public void save(@RequestPart("saveData") BoardDTO boardDTO,
                     @RequestPart("boardFile") MultipartFile file) throws IOException {
        String fileName = file.getOriginalFilename();
        file.transferTo(new File(fileName));
        boardDTO.setBoardFile(fileName);
        boardService.save(boardDTO);
    }
}

3. 额外检查项 #

• 跨域配置：若React和Spring端口不同，需在Spring中配置CORS，允许前端域名的请求
• 文件大小限制：上传大文件时，需在Spring配置文件中设置spring.servlet.multipart.max-file-size和spring.servlet.multipart.max-request-size参数
• 字段匹配：确保BoardDTO中的字段名和React传递的JSON字段完全一致（大小写敏感）

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