React+SpringBoot图片上传报错：Required request part 'image'缺失

后端报错信息：

2022-12-04 03:25:28.610  WARN 15080 --- [nio-8080-exec-2] .w.s.m.s.DefaultHandlerExceptionResolver : Resolved [org.springframework.web.multipart.support.MissingServletRequestPartException: Required request part 'image' is not present]
2022-12-04 03:25:28.631  WARN 15080 --- [nio-8080-exec-1] .w.s.m.s.DefaultHandlerExceptionResolver : Resolved [org.springframework.http.converter.HttpMessageNotReadableException: JSON parse error: Cannot deserialize value of type `java.util.LinkedHashMap<java.lang.String,java.util.List<java.lang.String>>` from Array value (token `JsonToken.START_ARRAY`); nested exception is com.fasterxml.jackson.databind.exc.MismatchedInputException: Cannot deserialize value of type `java.util.LinkedHashMap<java.lang.String,java.util.List<java.lang.String>>` from Array value (token `JsonToken.START_ARRAY`)
 at [Source: (org.springframework.util.StreamUtils$NonClosingInputStream); line: 1, column: 1]]

错误原因分析 #

1. MissingServletRequestPartException：后端接口要求名为image的文件参数，但前端请求未正确传递该参数，或参数名大小写/拼写不匹配。
2. HttpMessageNotReadableException：后端期望接收JSON键值对格式数据，但前端发送了JSON数组，导致解析失败。通常是前端错误设置请求头或数据格式导致。

解决方案 #

React端检查与修复 #

1. 确保FormData构建正确

   • 添加文件时的键名必须和后端@RequestParam("image")的名称完全一致（区分大小写）。
   • 正确示例：

     const formData = new FormData();
     // file为input[type="file"]获取的文件对象
     formData.append('image', file);
     

   • 禁止将FormData转为JSON发送，文件上传必须用multipart/form-data格式。

2. 不要手动设置Content-Type

   • 浏览器会自动为FormData请求添加正确的multipart/form-data头及边界标识，手动设置反而会导致后端解析失败。
   • 错误示例（需避免）：

     axios.post('/api/upload', formData, {
       headers: { 'Content-Type': 'multipart/form-data' }
     })
     

   • 正确示例：

     axios.post('/api/upload', formData)
     

3. 统一用FormData传递所有参数

   • 如果接口需要同时传文件和其他参数，所有参数都要添加到FormData中，不要混合JSON和FormData。
   • 示例：

     formData.append('image', file);
     formData.append('desc', '用户头像');
     

SpringBoot端检查与修复 #

1. 确认接口参数配置正确

   • 接口需用@PostMapping，并通过@RequestParam("image") MultipartFile image接收文件。
   • 正确接口示例：

     @PostMapping("/api/upload")
     public ResponseEntity<String> uploadImage(@RequestParam("image") MultipartFile image) {
         // 文件保存逻辑
         return ResponseEntity.ok("上传成功");
     }
     

   • 如需接收多参数或实体对象，可使用@ModelAttribute或全部放入FormData中传递。

2. 检查Multipart配置

   • SpringBoot默认启用Multipart支持，如需自定义大小限制，在application.properties中添加：

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

3. 排查请求格式冲突

   • 确认接口未被其他请求映射覆盖，避免请求被错误解析为JSON格式。

调试建议 #

• 用浏览器开发者工具（Network面板）查看请求的FormData内容和请求头，确认image参数存在且格式正确。
• 用Postman直接测试后端接口：创建multipart/form-data请求，添加image参数并上传文件，验证后端是否正常响应。

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