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

UE5 学习系列(二)用户操作界面及介绍

这篇博客是 UE5 学习系列博客的第二篇&#xff0c;在第一篇的基础上展开这篇内容。博客参考的 B 站视频资料和第一篇的链接如下&#xff1a; 【Note】&#xff1a;如果你已经完成安装等操作&#xff0c;可以只执行第一篇博客中 2. 新建一个空白游戏项目 章节操作&#xff0c;重…...

Nuxt.js 中的路由配置详解

Nuxt.js 通过其内置的路由系统简化了应用的路由配置&#xff0c;使得开发者可以轻松地管理页面导航和 URL 结构。路由配置主要涉及页面组件的组织、动态路由的设置以及路由元信息的配置。 自动路由生成 Nuxt.js 会根据 pages 目录下的文件结构自动生成路由配置。每个文件都会对…...

在Ubuntu中设置开机自动运行(sudo)指令的指南

在Ubuntu系统中&#xff0c;有时需要在系统启动时自动执行某些命令&#xff0c;特别是需要 sudo权限的指令。为了实现这一功能&#xff0c;可以使用多种方法&#xff0c;包括编写Systemd服务、配置 rc.local文件或使用 cron任务计划。本文将详细介绍这些方法&#xff0c;并提供…...

VTK如何让部分单位不可见

最近遇到一个需求&#xff0c;需要让一个vtkDataSet中的部分单元不可见&#xff0c;查阅了一些资料大概有以下几种方式 1.通过颜色映射表来进行&#xff0c;是最正规的做法 vtkNew<vtkLookupTable> lut; //值为0不显示&#xff0c;主要是最后一个参数&#xff0c;透明度…...

【配置 YOLOX 用于按目录分类的图片数据集】

现在的图标点选越来越多&#xff0c;如何一步解决&#xff0c;采用 YOLOX 目标检测模式则可以轻松解决 要在 YOLOX 中使用按目录分类的图片数据集&#xff08;每个目录代表一个类别&#xff0c;目录下是该类别的所有图片&#xff09;&#xff0c;你需要进行以下配置步骤&#x…...

Spring Boot+Neo4j知识图谱实战:3步搭建智能关系网络!

一、引言 在数据驱动的背景下&#xff0c;知识图谱凭借其高效的信息组织能力&#xff0c;正逐步成为各行业应用的关键技术。本文聚焦 Spring Boot与Neo4j图数据库的技术结合&#xff0c;探讨知识图谱开发的实现细节&#xff0c;帮助读者掌握该技术栈在实际项目中的落地方法。 …...

OPenCV CUDA模块图像处理-----对图像执行 均值漂移滤波(Mean Shift Filtering)函数meanShiftFiltering()

操作系统&#xff1a;ubuntu22.04 OpenCV版本&#xff1a;OpenCV4.9 IDE:Visual Studio Code 编程语言&#xff1a;C11 算法描述 在 GPU 上对图像执行 均值漂移滤波&#xff08;Mean Shift Filtering&#xff09;&#xff0c;用于图像分割或平滑处理。 该函数将输入图像中的…...

dify打造数据可视化图表

一、概述 在日常工作和学习中&#xff0c;我们经常需要和数据打交道。无论是分析报告、项目展示&#xff0c;还是简单的数据洞察&#xff0c;一个清晰直观的图表&#xff0c;往往能胜过千言万语。 一款能让数据可视化变得超级简单的 MCP Server&#xff0c;由蚂蚁集团 AntV 团队…...

九天毕昇深度学习平台 | 如何安装库?

pip install 库名 -i https://pypi.tuna.tsinghua.edu.cn/simple --user 举个例子&#xff1a; 报错 ModuleNotFoundError: No module named torch 那么我需要安装 torch pip install torch -i https://pypi.tuna.tsinghua.edu.cn/simple --user pip install 库名&#x…...

Git 3天2K星标:Datawhale 的 Happy-LLM 项目介绍(附教程)

引言 在人工智能飞速发展的今天&#xff0c;大语言模型&#xff08;Large Language Models, LLMs&#xff09;已成为技术领域的焦点。从智能写作到代码生成&#xff0c;LLM 的应用场景不断扩展&#xff0c;深刻改变了我们的工作和生活方式。然而&#xff0c;理解这些模型的内部…...