当前位置: 首页 > news >正文

post请求同时上传文件并传递其他参数的前后端写法

最近有一需求,post请求从前端上传一个文件同时传递一个参数,多次实验后记录下两种写法:

方法一:

前端:重点是设置请求头代码如下:

getfile(event) {//input框输入文件let file = event.target.files[0];let type="其他参数"//调用上传接口this.$http.post("/upload",{file,type},{headers: {'Content-Type': 'multipart/form-data' //重点:设置请求头}}).then(res => {if (res.data.code == 200) {this.$message.success(res.data.message)//上传成功回调} else {this.$message.error(res.data.message)}}) 
}

后端:重点是接受传参时不指定 @RequestParam 或者 @RequestBody,代码如下图

 @PostMapping(value = "/upload")public Result<String> fileUpload( MultipartFile file,String type) throws IOException {//可接收到参数 file 和 type}

方法二:

前端:使用new FormData()进行封装

getFile(event) {let file = event.target.files[0];const formData = new FormData()formData.append('file',file)formData.append('type', "其他参数")this.$http.post("/upload", formData).then(res => {if (res.data.code == 200) {this.$message.success(res.data.message)//上传成功回调} else {this.$message.error(res.data.message)}})
}

后端

	 @PostMapping(value = "/upload")public Result<String> fileUpload(@RequestParam(name = "file") MultipartFile file,@RequestParam(name = "type", required = false) String type) throws IOException {//可接收参数 file 和 type
}

相关文章:

post请求同时上传文件并传递其他参数的前后端写法

最近有一需求&#xff0c;post请求从前端上传一个文件同时传递一个参数&#xff0c;多次实验后记录下两种写法&#xff1a; 方法一&#xff1a; 前端&#xff1a;重点是设置请求头代码如下&#xff1a; getfile(event) {//input框输入文件let file event.target.files[0];l…...

【数仓】基本概念、知识普及、核心技术

一、数仓基本概念 数仓的定义&#xff1a; 数据仓库&#xff08;Data Warehouse&#xff0c;简称DW或DWH&#xff09;是一个面向主题的、集成的、相对稳定的、反映历史变化的数据集合&#xff0c;用于支持管理决策。简言之&#xff0c;它是一个大型存储库&#xff0c;用于存储来…...

ky10-server docker 离线安装包、离线安装

离线安装脚本 # ---------------离线安装docker------------------- rpm -Uvh --force --nodeps *.rpm# 修改docker拉取源为国内 rm -rf /etc/docker mkdir -p /etc/docker touch /etc/docker/daemon.json cat >/etc/docker/daemon.json<<EOF{"registry-mirro…...

Linux的gdb调试

文章目录 一、编译有调试信息的目标文件二、启动gdb调试文件1、查看内容list/l&#xff1a;l 文件名:行号/函数名&#xff0c;l 行号/函数名2、打断点b&#xff1a;b文件名:行号/函数名&#xff0c;b 行号/函数名 与 查看断点info/i&#xff1a;info b3、删除断点d&#xff1a;…...

IO多路复用-select模型

IO多路复用&#xff08;IO Multiplexing&#xff09;是一种高效的网络编程模型&#xff0c;可以同时监控多个文件描述符&#xff08;包括套接字等&#xff09;&#xff0c;并在有数据可读或可写时进行通知。其中&#xff0c;select模型是最常用和最早引入的一种IO多路复用模型。…...

班级事务管理系统设计与实现

** &#x1f345;点赞收藏关注 → 私信领取本源代码、数据库&#x1f345; 本人在Java毕业设计领域有多年的经验&#xff0c;陆续会更新更多优质的Java实战项目希望你能有所收获&#xff0c;少走一些弯路。&#x1f345;关注我不迷路&#x1f345;** 一 、设计说明 1.1 选题…...

金三银四面试必问:Redis真的是单线程吗?

文章目录 01 Redis中的多线程1&#xff09;redis-server&#xff1a;2&#xff09;jemalloc_bg_thd3&#xff09;bio_xxx&#xff1a; 02 I/O多线程03 Redis中的多进程04 结论▼延伸阅读 由面试题“Redis是否为单线程”引发的思考 作者&#xff1a;李乐 来源&#xff1a;IT阅读…...

notejs+nvm+angular+typescript.js环境 Hertzbeat 配置

D:\Program Files\nodejs\ D:\Users\Administrator\AppData\Roaming\nvm nvm命令提示 nvm arch&#xff1a;显示node是运行在32位还是64位。 nvm install <version> [arch] &#xff1a;安装node&#xff0c; version是特定版本也可以是最新稳定版本latest。 可选参…...

docker安装单机版canal和使用

说明&#xff1a;我安装的组件架构如下&#xff1a; 1、准备一台虚拟机&#xff0c;192.168.2.223&#xff0c;我安装的时候&#xff0c;docker只支持canal1.1.6版本&#xff0c;1.1.7无法使用docker安装.还有一点要补充&#xff0c;就是1.1.6好像不支持es8.0以上版本&#x…...

qt_xml文件

文章内容 简单介绍xml文件的增删改查写生成和读取xml文件的例子增删改查 Qt提供了QDomDocument类来操作XML文件。 增加节点: QDomElement root = doc.createElement("root"); doc.appendChild(root);QDomElement element = doc.createElement("element"…...

【DAY05 软考中级备考笔记】线性表,栈和队列,串数组矩阵和广义表

线性表&#xff0c;栈和队列&#xff0c;串数组矩阵和广义表 2月28日 – 天气&#xff1a;阴转晴 时隔好几天没有学习了&#xff0c;今天补上。明天发工资&#xff0c;开心&#x1f604; 1. 线性表 1.1 线性表的结构 首先线性表的结构分为物理结构和逻辑结构 物理结构按照实…...

AutoGen Studio助力打造私人GPTs

微软最近在开源项目里的确挺能整活儿啊! 这次我介绍的是AutoGen Studio,我认为这个项目把AutoGen可用性又拔高了一个层次的项目 项目给自己的定义是交互式的多Agent workflow 项目地址:autogen/samples/apps/autogen-studio at main microsoft/autogen (github.com) 首先我…...

SpringBoot 自定义映射规则resultMap association一对一

介绍 例&#xff1a;学生表&#xff0c;班级表&#xff0c;希望在查询学生的时候一起返回该学生的班级&#xff0c;而一个实体类封装的是一个表&#xff0c;如需要多表查询就需要自定义映射。 表结构 班级表 学生表 SQL语句 SELECT a.id,a.name,a.classes,b.id classes…...

华东地区汽车相关夹具配套企业分布图,你了解多少?

1、华东地区 上海汽车整车厂众多&#xff0c;大多以设计研发为主&#xff0c;注重技术和造型&#xff0c;这与他们的整体风格息息相关。 作为与国际接轨的特大城市&#xff0c;中国的经济、交通、科技、工业、金融、贸易、会展和航运中心&#xff0c;聚集了大量的设计和研发人…...

SpringBoot - 后端数据返回前端各个数据类型全局格式化

全局配置 import com.fasterxml.jackson.annotation.JsonInclude; import com.fasterxml.jackson.databind.ObjectMapper; import com.fasterxml.jackson.databind.SerializationFeature; import com.fasterxml.jackson.databind.module.SimpleModule; import com.fasterxml.j…...

实验室记账项目(java+Mysql+jdbc)

前言&#xff1a; 因为自己学习能力有限和特殊情况必须要找一个项目来做&#xff0c;但是上网搜的那些项目有两种&#xff08;一种是技术太多&#xff0c;自己能力不够&#xff1b;一种是技术太少&#xff0c;项目太简单&#xff09;导致都不适合本人&#xff0c;本人现有技术只…...

spring boot 整合 minio存储 【使用篇】

zi导入依赖 <!--minio--><dependency><groupId>io.minio</groupId><artifactId>minio</artifactId><version>8.0.3</version></dependency> yml配置&#xff08;默认配置&#xff09; spring:# 配置文件上传大小限制s…...

【Redis】深入理解 Redis 常用数据类型源码及底层实现(5.详解List数据结构)

本文是深入理解 Redis 常用数据类型源码及底层实现系列的第5篇&#xff5e;前4篇可移步(&#xffe3;∇&#xffe3;)/ 【Redis】深入理解 Redis 常用数据类型源码及底层实现&#xff08;1.结构与源码概述&#xff09;-CSDN博客 【Redis】深入理解 Redis 常用数据类型源码及底…...

Vue+Flask电商后台管理系统

在这个项目中&#xff0c;我们将结合Vue.js前端框架和python后端框架Flask&#xff0c;打造一个功能强大、易于使用的电商后台管理系统 项目演示视频&#xff1a; VueFlask项目 目录 前端环境&#xff08;Vue.js&#xff09;&#xff1a; 后端环境&#xff08;python-Flask&…...

SpringBoot保姆级入门文档

目录 1、SpringBoot的优点 2、和Spring、SpringMVC的对比 3、Xml 和 JavaConfig 1、SpringBoot的优点 2、和Spring、SpringMVC的对比 3、Xml 和 JavaConfig Spring 使用 Xml 作为容器配置文件&#xff0c;在 3.0 以后加入了 JavaConfig&#xff0c;使用 java 类做配置文件使…...

软件泛化管理中的模板元编程

软件泛化管理中的模板元编程&#xff1a;解锁高效开发新范式 在当今快速迭代的软件开发领域&#xff0c;如何提升代码复用性、降低维护成本成为团队的核心挑战。模板元编程&#xff08;Template Metaprogramming, TMP&#xff09;作为泛型编程的高级形态&#xff0c;通过在编译…...

按降AI率工具排行榜选完,下一步怎么用?保姆级教程来了

按降AI率工具排行榜选完&#xff0c;下一步怎么用&#xff1f;保姆级教程来了 每次有人问我"降AI率工具排行榜哪个好"&#xff0c;我推荐完嘎嘎降AI、比话降AI、率零这排行榜前3之后&#xff0c;下一个问题永远是&#xff1a;"那……我该怎么用&#xff1f;&qu…...

用STM32玩转PS2无线手柄:从时序图到按键读取的保姆级代码解析

STM32与PS2无线手柄深度实战&#xff1a;时序解析与按键捕获全流程 第一次拿到PS2手柄想接入STM32时&#xff0c;我盯着那四根线发愣——CLK、CMD、DAT、CS&#xff0c;看似简单的接口背后藏着怎样的通信奥秘&#xff1f;作为嵌入式开发者&#xff0c;理解并实现这种专有协议是…...

Spark执行计划深度解析:从Explain输出洞察性能优化

1. Spark执行计划基础&#xff1a;从Explain开始说起 第一次看到Spark执行计划的时候&#xff0c;我完全被那一大串树状结构搞懵了。记得当时有个查询跑了快2小时还没结束&#xff0c;我试着加了个.explain()&#xff0c;结果输出像天书一样。后来才发现&#xff0c;这其实是Sp…...

OBS Advanced Timer:直播时间管理的终极解决方案

OBS Advanced Timer&#xff1a;直播时间管理的终极解决方案 【免费下载链接】obs-advanced-timer 项目地址: https://gitcode.com/gh_mirrors/ob/obs-advanced-timer 在直播的世界里&#xff0c;时间就是一切。无论是教学直播的章节控制、游戏直播的BOSS战计时&#x…...

Godot逆向工程工具GDSDecomp:游戏资源解构与重构的深度解析

Godot逆向工程工具GDSDecomp&#xff1a;游戏资源解构与重构的深度解析 【免费下载链接】gdsdecomp Godot reverse engineering tools 项目地址: https://gitcode.com/GitHub_Trending/gd/gdsdecomp 在游戏开发与维护的生命周期中&#xff0c;资源包的管理与逆向分析一直…...

ECharts 旭日图:深入解析与实战应用

ECharts 旭日图:深入解析与实战应用 引言 ECharts旭日图,作为ECharts图表家族中的一员,以其独特的视觉效果和丰富的数据展示能力,在数据可视化领域占有一席之地。本文将深入解析ECharts旭日图的基本原理、应用场景以及实战技巧,帮助读者全面了解并掌握这一图表的运用。 …...

[嵌入式系统-257]:如何理解进程是任务资源分配的最小单位,线程是CPU调度的最小单位

要理解“进程是资源分配的最小单位&#xff0c;线程是CPU调度的最小单位”这句话&#xff0c;关键在于将程序的“资源所有权”和“执行权”分离开来看。我们可以通过一个生动的比喻来理解&#xff0c;然后深入其技术原理。&#x1f3e2; 一个生动的比喻&#xff1a;工厂与工人想…...

C# 在工控机中的多任务并发处理技术

在工业自动化领域,工控机(工业计算机)作为工业控制和数据采集的核心设备,承担着大量的数据处理任务。随着智能制造和工业4.0的推进,工控机需要处理的任务越来越复杂,涉及到对设备的实时监控、数据采集、分析与处理、报警等多项工作。在这种背景下,多任务并发处理技术成为…...

深入PyTorch源码:手把手调试grid_sample,搞懂-1到1的坐标映射与双线性插值细节

深入PyTorch源码&#xff1a;手把手调试grid_sample&#xff0c;搞懂-1到1的坐标映射与双线性插值细节 在计算机视觉和深度学习领域&#xff0c;图像变形和采样是许多任务的基础操作。PyTorch作为主流深度学习框架&#xff0c;提供了grid_sample这一强大但常被低估的函数。不同…...