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. 前端要注意请求头信息
相关推荐
EatFan1 天前
Java接入支付宝 JSAPI 支付保姆教程(二):流程讲解与前后端代码讲解
前端·spring boot·后端·微信小程序·小程序·uni-app
凤山老林1 天前
Spring Boot 整合 Flowable 的企业级落地指南
数据库·spring boot·后端·flowable·工作流
代码调试师1 天前
【毕设分享】基于SpringBoot的旅游向导分配管理系统57145
spring boot·毕业设计·源码·课程设计·毕设·大作业·程序定制
2301_32241428041 天前
活力孕康复APP 47737- 原创(免费领源码+部署教程+开发环境)
java·vue.js·spring boot·mysql·微信小程序·idea·微信开发者工具
vx_Biye_Design1 天前
springboot游泳馆系统93765-计算机课程设计、毕业设计
java·javascript·spring boot·后端·python·spring·课程设计
专业程序开发源1 天前
springbootLivehouse票务系统-计算机课程设计、毕业设计
vue.js·spring boot·后端·python·django·课程设计·pygame
卓怡学长1 天前
w233基于vue和springboot的宠物管理系统的设计与实现
java·vue.js·spring boot·spring·intellij-idea
梨涡泥窝1 天前
JavaWeb——基于 Spring Boot + Vue 的图书管理系统的设计与实现
vue.js·spring boot·后端
隐退山林1 天前
JavaEE进阶:SpringBoot统一功能处理
java·spring boot·后端
loser.with.m1 天前
【AgentScope 2.0】8-MCP 集成:Agent 的「USB-C 接口」是怎么接的
人工智能·spring boot·agentscope