SpringBoot 如何同时接收文件以及json参数

SpringBoot 如何同时接收文件以及json参数

前端传参

js 复制代码
let upData = new FormData();
// 将文件列表赋值给files参数
this.files.forEach(function (file) {
  upData.append("files", file);
});
this.firmwareSaveDto = this.formData;
let commodityDto = JSON.stringify(this.firmwareSaveDto);
// 将json对象赋值给saveDto参数
upData.append(
  "saveDto",
  new Blob([commodityDto], { type: "application/json" })
);
// 发送请求,注意请求头信息
axios.post('/v1/test/upload_files', upData, {
    headers: {
        'Content-Type': 'multipart/form-data'
    }
})

后端接收

java 复制代码
/**
 * 上传文件
 * @param files
 * @param saveDto
 * @return
 */
@PostMapping(value = "/upload_files",name = "上传文件")
public ExecuteResult uploadFiles(
						@RequestPart("files") MultipartFile[] files,
                        @RequestPart("saveDto") @Valid SaveDtosaveDto){
	// 逻辑代码。。。。。。
}

注意

  1. 后端【同时接收文件以及json参数】时使用@RequestPart注解。
  2. 后端与前段要约定好文件与json的对应参数名files、saveDto。
  3. 前端要注意请求头信息
相关推荐
专业程序开发源28 分钟前
django新闻推荐系统70655-计算机课程设计、毕业设计
java·javascript·spring boot·后端·python·django·课程设计
vx_Biye_Design44 分钟前
springboot一站式旅游管理平台81037-计算机课程设计、毕业设计
java·vue.js·spring boot·后端·课程设计·express·旅游
vx_Biye_Design1 小时前
springboot宠物寄养服务预约与监管系统82684-计算机课程设计、毕业设计
java·vue.js·spring boot·elasticsearch·课程设计·express·宠物
程序员小杰@1 小时前
Spring Boot 常用注解分类速记
java·spring boot·后端
vx_Biye_Design1 小时前
springboot小学生英语学习APP62773-计算机课程设计、毕业设计
java·vue.js·spring boot·后端·python·学习·课程设计
9624562 小时前
餐饮 SaaS 优惠券系统架构演进(三):优惠计算引擎——商品级计价、冲突策略与优惠分摊
java·数据库·spring boot
vx_Biye_Design2 小时前
expressDeepSeek社团咨询助手的学生社团管理系统60746-计算机课程设计、毕业设计
java·vue.js·spring boot·后端·python·课程设计·express
vx_Biye_Design2 小时前
springboot宠物领养与救助平台64334-计算机课程设计、毕业设计
java·vue.js·spring boot·后端·mysql·课程设计·宠物
vx_Biye_Design2 小时前
django就业信息推荐系统61953-计算机课程设计、毕业设计
java·vue.js·spring boot·python·架构·django·课程设计
专业程序开发源3 小时前
springboot高校学生社团管理系统74810-计算机课程设计、毕业设计
java·vue.js·spring boot·后端·spring·php·课程设计