当前位置: 首页 > 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 类做配置文件使…...

Jimeng LoRA多版本智能排序测试:告别混乱,直观选择最佳训练迭代

Jimeng LoRA多版本智能排序测试&#xff1a;告别混乱&#xff0c;直观选择最佳训练迭代 1. 项目背景与核心价值 在AI图像生成领域&#xff0c;LoRA&#xff08;Low-Rank Adaptation&#xff09;技术已经成为模型微调的主流方案。然而&#xff0c;当我们需要测试不同训练阶段的…...

Layui tab选项卡如何动态根据ID值进行程序化切换

element.tabChange() 是 Layui 官方唯一支持的程序化 tab 切换方式&#xff0c;需严格匹配 lay-filter 和 lay-id&#xff0c;且必须在 tab 渲染完成后调用&#xff0c;动态添加时须等 tabAdd() 回调执行完毕。element.tabChange() 是唯一可靠的切换入口直接调用 element.tabch…...

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

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

开源鸿蒙 Flutter 实战|页面转场动画完整实现

&#x1f3ac; 开源鸿蒙 Flutter 实战&#xff5c;页面转场动画完整实现 欢迎加入开源鸿蒙跨平台社区→https://openharmonycrosplatform.csdn.net 【摘要】本文面向开源鸿蒙跨平台开发新手&#xff0c;基于 Flutter 框架实现了 7 种风格的页面转场动画&#xff0c;包含淡入淡…...

3分钟解锁Axure RP中文界面:从英文障碍到设计自由

3分钟解锁Axure RP中文界面&#xff1a;从英文障碍到设计自由 【免费下载链接】axure-cn Chinese language file for Axure RP. Axure RP 简体中文语言包。支持 Axure 11、10、9。不定期更新。 项目地址: https://gitcode.com/gh_mirrors/ax/axure-cn 还在被Axure RP的英…...

AMBA-APB 协议实战解析:从信号到状态机的设计精要

1. AMBA-APB协议基础&#xff1a;芯片设计的"交通规则" 第一次接触AMBA-APB协议时&#xff0c;我把它想象成城市道路的交通信号系统。就像红绿灯控制车辆通行一样&#xff0c;APB协议规范了芯片内部各个模块之间的数据传输规则。这个类比让我瞬间理解了协议存在的意义…...

保姆级避坑指南:用FlyMcu给STM32F103下载程序,别再傻傻用Keil编译了!

STM32F103串口通信实战&#xff1a;从FlyMcu下载到数据收发全解析 第一次接触STM32开发板时&#xff0c;最让人困惑的往往不是代码本身&#xff0c;而是整个工具链的使用流程。很多新手拿到商家提供的例程后&#xff0c;第一反应是打开Keil进行编译&#xff0c;却不知道有些现…...

ChampR:打破英雄联盟数据孤岛,构建智能化游戏决策助手

ChampR&#xff1a;打破英雄联盟数据孤岛&#xff0c;构建智能化游戏决策助手 【免费下载链接】champr &#x1f436; Yet another League of Legends helper 项目地址: https://gitcode.com/gh_mirrors/ch/champr 在英雄联盟的竞技世界中&#xff0c;每个玩家都面临着相…...

智能代码生成器版本演进全景图(2022–2024核心算法对比白皮书)

第一章&#xff1a;智能代码生成器版本演进全景图&#xff08;2022–2024核心算法对比白皮书&#xff09; 2026奇点智能技术大会(https://ml-summit.org) 从模板驱动到语义理解的范式跃迁 2022年初代系统以规则引擎预置模板为核心&#xff0c;依赖显式语法树匹配与硬编码上下…...

别再死记ArcFace公式了!手把手教你用PyTorch/TensorFlow复现角度边界Margin(附完整代码)

从零实现ArcFace&#xff1a;代码实践中的角度边界理解与优化 第一次看到ArcFace论文里那些复杂的三角函数公式时&#xff0c;我完全懵了——cos(θm)展开、数值稳定性处理、梯度优化条件判断&#xff0c;这些数学符号怎么变成可运行的代码&#xff1f;直到我亲手用PyTorch实现…...