Spring Boot与React图片传输问题：如何上传图片至后端并存入数据库

问题场景 #

开发全栈电商项目时，尝试通过PUT请求将图片发送到Spring Rest Controller并存入数据库，触发以下异常：

org.springframework.web.multipart.MultipartException: Current request is not a multipart request

相关代码 #

前端获取文件的代码：

setFile(e.target.files && e.target.files[0])

调用上传方法：

DishesService.addDish(dish, file)

前端完整业务代码：

static async addDish(dish: IDish, file: any) {
    try {
        await axios.post<IDish>('http://localhost:8080/dishes', dish)
            .then(response => {
                this.updateDishImage(response.data.id, file)
            })
    } catch (e) {
        console.log('произошла ошибка при добавлении блюда')
    }
}

static async updateDishImage(id: number | undefined, image: any) {
    try {
        await axios.put('http://localhost:8080/dishes/' + id, {}, {
            params: {
                file: image
            }
        })
    } catch (e) {
        console.log('Произошла ошибка при добавлении картинки к блюду')
    }
}

后端Spring Boot的PUT接口代码：

@PutMapping("{dishId}")
public ResponseEntity<DishEntity> updateDishImage(@PathVariable Long dishId, @RequestParam("file") MultipartFile file) {
    DishEntity updateDish = dishService.updateDishImage(file, dishId);

    return ResponseEntity.ok(updateDish);
}

问题原因 #

前端错误地将文件放在params参数中传递，这会把文件对象强制转换为URL参数的字符串形式，无法构建符合要求的multipart请求。文件上传必须将文件放入请求体，通过FormData格式传递。

解决方案 #

1. 修改前端上传逻辑 #

将updateDishImage方法改为使用FormData封装文件，并正确配置axios请求：

static async updateDishImage(id: number | undefined, image: any) {
    try {
        const formData = new FormData();
        formData.append('file', image);
        
        await axios.put(`http://localhost:8080/dishes/${id}`, formData);
    } catch (e) {
        console.log('Произошла ошибка при добавлении картинки к блюду');
    }
}

说明：无需手动设置Content-Type，axios会自动识别FormData并添加正确的请求头，避免手动配置导致的格式错误。

2. 后端配置确认（可选） #

Spring Boot默认已内置MultipartResolver配置，无需额外修改。如果需要自定义上传限制（如文件大小），可在application.properties中添加：

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

额外优化建议 #

可以将添加菜品和上传图片合并为一个POST请求，减少HTTP调用次数：

static async addDish(dish: IDish, file: any) {
    try {
        const formData = new FormData();
        // 将菜品对象字段逐个加入FormData
        Object.keys(dish).forEach(key => {
            formData.append(key, dish[key]);
        });
        formData.append('file', file);
        
        await axios.post<IDish>('http://localhost:8080/dishes', formData);
    } catch (e) {
        console.log('произошла ошибка при добавлении блюда');
    }
}

后端对应修改POST接口：

@PostMapping
public ResponseEntity<DishEntity> addDish(@ModelAttribute DishEntity dish, @RequestParam("file") MultipartFile file) {
    DishEntity newDish = dishService.addDishWithImage(dish, file);
    return ResponseEntity.ok(newDish);
}

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