Spring Boot使用Axios上传图片遇500错误，求技术排查

核心问题点 #

1. 请求格式不匹配：你的createNews方法用@RequestBody接收JSON，但文件上传需要multipart/form-data格式，Spring无法解析这种请求体为List<News>，直接抛出500错误。
2. Blob类型处理复杂：java.sql.Blob需要从MultipartFile手动转换，直接绑定会导致类型转换异常。
3. 前端请求方式错误：Axios上传文件时没有用FormData，而是继续用JSON格式发送，导致后端无法识别文件参数。

具体修复步骤 #

1. 调整控制器代码

替换原@PostMapping方法，支持multipart/form-data请求，同时处理文件转换：

@PostMapping(consumes = MediaType.MULTIPART_FORM_DATA_VALUE)
public ResponseEntity<News> createNews(
        @RequestParam("title") String title,
        @RequestParam("description") String description,
        @RequestParam("date") String date,
        @RequestParam(value = "image", required = false) MultipartFile image,
        @RequestParam("category") String category,
        @RequestParam("url") String url) throws SQLException, IOException {
    
    News news = new News();
    news.setTitle(title);
    news.setDescription(description);
    news.setDate(date);
    news.setCategory(category);
    news.setUrl(url);
    
    // 处理图片：将MultipartFile转为Blob
    if (image != null && !image.isEmpty()) {
        byte[] imageBytes = image.getBytes();
        Blob blob = new SerialBlob(imageBytes);
        news.setImage(blob);
    }
    
    News savedNews = newsRepository.save(news);
    return ResponseEntity.status(HttpStatus.CREATED).body(savedNews);
}

如果需要批量上传多条带图片的News，建议改为接收多个MultipartFile和对应的参数，或者前端分多次请求。

2. 优化实体类（可选）

java.sql.Blob在序列化和存储时容易出问题，建议换成byte[]更简单：

@Lob
private byte[] image;

// 对应的getter/setter
public byte[] getImage() { return image; }
public void setImage(byte[] image) { this.image = image; }

此时控制器里的图片转换可以简化为：

if (image != null && !image.isEmpty()) {
    news.setImage(image.getBytes());
}

3. 前端Axios请求调整

必须用FormData对象封装参数，不能用JSON：

const formData = new FormData();
formData.append('title', newsTitle);
formData.append('description', newsDesc);
formData.append('date', newsDate);
formData.append('image', fileInput.files[0]); // 这里是文件对象
formData.append('category', newsCategory);
formData.append('url', newsUrl);

axios.post('/api/v1/news', formData, {
    headers: {
        'Content-Type': 'multipart/form-data'
    }
})
.then(response => {
    console.log('上传成功', response);
})
.catch(error => {
    console.error('上传失败', error);
});

排查思路 #

1. 查看后端日志：500错误的核心是服务器端异常，先看Spring Boot控制台的堆栈信息，明确是HttpMessageNotReadableException（请求体解析失败）还是SQLException（Blob转换错误），精准定位问题。
2. 测试接口：用Postman先测试multipart/form-data格式的请求，排除前端代码问题，确认后端接口正常后再调前端。
3. 检查参数匹配：确保前端FormData的key和后端@RequestParam的参数名完全一致，大小写敏感。

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