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. 前端要注意请求头信息
相关推荐
亦暖筑序1 小时前
Spring AI多模型路由实战:企业级智能路由+自动降本指南
spring boot·大模型·企业开发·spring ai·多模型路由
RemainderTime2 小时前
Spring Boot脚手架集成Sa-Token实现生产级RBAC权限管理
java·spring boot·后端·系统架构
世界尽头与你2 小时前
Spring Boot Watcher 未授权访问漏洞
spring boot·安全·网络安全·渗透测试
lpd_lt2 小时前
AI生成Spring Boot + Vue 3 + MySQL + MyBatis-Plus的项目实战
java·spring boot·vue·ai编程
绝知此事2 小时前
RabbitMQ 从入门到精通:Spring Boot 实战三部曲(三)—— 高级应用与性能优化
spring boot·rabbitmq·java-rabbitmq
绝知此事2 小时前
RabbitMQ 从入门到精通:Spring Boot 实战三部曲(一)—— 基础核心与快速上手
spring boot·rabbitmq·java-rabbitmq
来杯@Java11 小时前
图书管理系统(基于springboot+vue前后端分离的项目)计算机毕业设计java
java·spring boot·spring·vue·毕业设计·mybatis·课程设计
qq_25183645713 小时前
SpringBoot+Vue 共享电池柜管理系统 完整实现 前后端分离项目实战 完整代码
vue.js·spring boot·后端
华大哥18 小时前
前后端分离实现五级行政区划树形菜单及设备查询管理
sqlite·vue·springboot
码界筑梦坊19 小时前
282-基于Python的豆瓣音乐可视化分析推荐系统
开发语言·python·信息可视化·数据分析·flask·vue