React向Spring传递文件与数据遇Axios 400错误，求排查解决

问题根源分析 #

React代码的问题 #

• 参数传递错误：代码中构建了FormData对象，但axios发起请求时传入的是saveData普通对象，而非组装好的表单数据，导致后端无法解析多部分表单格式。
• 请求头设置错误：手动指定"Content-Type": "multipart/form-data"会丢失FormData自动生成的boundary分隔符，后端无法正确拆分表单中的数据与文件。

Spring代码的问题 #

• DTO绑定方式错误：使用@RequestParam BoardDTO无法将表单字段自动映射到DTO对象，应该用@ModelAttribute来绑定表单数据。
• MyBatis语法错误：Mapper XML的insert语句中，values部分的boardFile=#{boardFile}格式错误，values列表只需填写对应字段值，无需key=前缀。
• 文件存储不规范：直接用文件名保存会存储到项目根目录，且未提前创建存储目录，容易引发IO异常。

修正后的代码 #

React端代码 #

const write = () => {
    const formData = new FormData();
    formData.append("boardWriter", sessionStorage.getItem("memberID"));
    formData.append("boardTitle", title);
    formData.append("boardContents", contents);
    formData.append("boardFile", file);

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

Spring端代码 #

Controller修正

@PostMapping("/write")
@CrossOrigin(origins = "http://localhost:3000") // 根据React实际端口配置跨域
public void save(@ModelAttribute BoardDTO boardDTO,
                 @RequestParam MultipartFile boardFile) throws IOException {
    // 定义文件存储目录（项目根目录下的upload文件夹）
    String uploadDir = System.getProperty("user.dir") + "/upload/";
    File dir = new File(uploadDir);
    if (!dir.exists()) {
        dir.mkdirs(); // 自动创建多级目录
    }

    String fileName = boardFile.getOriginalFilename();
    File saveFile = new File(uploadDir + fileName);
    boardFile.transferTo(saveFile);

    boardDTO.setBoardFile(fileName);
    boardService.save(boardDTO);
}

MyBatis Mapper XML修正

<mapper namespace="Board">
    <insert id="save" parameterType="board">
        insert into board(boardWriter, boardTitle, boardContents, boardFile)
        values(#{boardWriter}, #{boardTitle}, #{boardContents}, #{boardFile})
    </insert>
</mapper>

额外注意事项 #

• 若上传大文件，需在Spring的application.properties中配置文件大小限制：

  spring.servlet.multipart.max-file-size=10MB
  spring.servlet.multipart.max-request-size=10MB
  

• 前端需确保file变量是从input[type="file"]的change事件中获取的合法File对象。
• 跨域配置需根据React实际运行端口调整@CrossOrigin中的origins参数。

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