前端同时传递文件数据+非文件数据,前后端解决方案

之前录制视频《文件上传组件》的时候有位观众提了个问题,如果我没有理解错的话,应该就是前后同时传递文件数据 + 非文件数据,前后端数据该如何接收,这里我给出我自己的解决方案

tip:下文在编写前端代码的时候,用到了这篇文章写《 文件组件封装》的组件

1. 封装对象

  • 前端
<script setup lang="ts">
const fileList = ref<Array<UploadUserFile>>();const upload3 = () => {// 上传单张图片const file = fileList.value[0];// 将前端数据封装到FormData中const data = new FormData();// 非文件数据data.append("number", "0");data.append("clientMd5", file.name);// 文件数据data.append("partFile", file.raw);axios.post("/api_demo/file/upload3", data, {headers: {"Content-Type": "multipart/form-data"}});
};
</script><template><el-row><FileUpload v-model:fileList="fileList" /><el-button type="success" @click="upload3">upload3</el-button><el-button type="success" @click="upload4">upload4</el-button></el-row>
</template>
  • 后端

entity:将要传递的非文件数据+文件数据封装到同一个对象

/*** 上传的文件切片*/
@Data
public class UploadPart {// 分片序号private Integer number;// 分片private MultipartFile partFile;// 原文件md5值(不是分片的md5)private String clientMd5;
}

接口

    @PostMapping("/upload3")public R upload3(@ModelAttribute UploadPart uploadPart) {return R.ok();}
  • 结果

后端接受成功

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述


2. RequestParam单独获取

前端代码不变,后端接口修改

@PostMapping("/upload3")public R upload3(@RequestParam("partFile") MultipartFile file,@RequestParam("number") String uid,@RequestParam("clientMd5") String clientMd5) {return R.ok();}

tip: 值得一提的是,FormData不建议封装复杂对象,比如List<Object>,后端对于这种数据很难处理。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/710091.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

MYSQL安装及卸载

目录 一、下载 二、解压 三、配置 1. 添加环境变量 2. 初始化MySQL 3. 注册MySQL服务 4. 启动MySQL服务 5. 修改默认账户密码 四、登录MySQL 五、卸载MySQL 一、下载 点开下面的链接&#xff1a;MySQL :: Download MySQL Community Server 点击Download 就可以下载对…

Linux-基础命令(黑马学习笔记)

Linux的目录结构 Linux的目录结构 Linux的目录结构是一个树形结构 Windows系统可以拥有多个盘符&#xff0c;如C盘、D盘、E盘 Linux没有盘符这个概念&#xff0c;只有一个根目录 /&#xff0c;所有文件都在它下面 Linux路径的描述方式 ● 在Linux系统中&#xff0c;路径之…

【AI绘画·24年1月最新】Stable Diffusion整合包安装!解压即用--秋葉aaaki 大佬的作品,试用

前言 Stable Diffusion 之前费老大的劲部署安装&#xff0c;解决报错。搞完之后&#xff0c;突然发现有个现成集成包可以用&#xff0c;真是效率高到不行&#xff0c;今天搞下来试试 我电脑配置&#xff1a; CPU: 12th Gen Intel Core™ i7-12700F 2.10 GHz 内存32G&#xff0…

腾讯云又双叕降价,云服务器配置优惠价格表2024新版报价

腾讯云服务器多少钱一年&#xff1f;62元一年起&#xff0c;2核2G3M配置&#xff0c;腾讯云2核4G5M轻量应用服务器218元一年、756元3年&#xff0c;4核16G12M服务器32元1个月、312元一年&#xff0c;8核32G22M服务器115元1个月、345元3个月&#xff0c;腾讯云服务器网txyfwq.co…

nginx使用详解--缓存使用

Nginx 是一个功能强大的 Web 服务器和反向代理服务器&#xff0c;它可以用于实现静态内容的缓存&#xff0c;缓存可以分为客户端缓存和服务端缓存。 客户端缓存 客户端缓存指的是浏览器缓存, 浏览器缓存是最快的缓存, 因为它直接从本地获取(但有可能需要发送一个协商缓存的请…

CAPL编程学习笔记--关于on 事件的详细解释

CAPL编程是比较有特色的一种面向通讯的编程语言。 1&#xff1a;on XXX类型&#xff08;即事件类型&#xff09; 维克多的官方文档对CAPL的描述是一门类C语言&#xff0c;说白了它也是用C写出来的。我们看on&#xff08;注意都是小写&#xff09;事件的代码结构 on * { }&…

设备管理系统解决方案

软件资料获取&#xff1a;软件项目开发全套文档下载_软件项目文档-CSDN博客 1.系统概述 1.1.需求描述 建立设备信息库&#xff0c;对设备相关档案的登录、整理。通过建立完善的设备档案&#xff0c;将设备的各类原始信息进行信息化管理&#xff0c;使设备档案查询工作方便快…

一图总结:华为销售体系(铁三角组织LTC流程)

《华为铁三角工作法》阅读了多遍&#xff0c;花了些时间整理了一张图对本书的框架性总结&#xff0c;从流程&#xff08;LTC&#xff09;、组织&#xff08;铁三角&#xff09;、激励和管理三个大方面概览华为销售体系。 核心是一靠流程&#xff0c;二靠团队&#xff0c;而前提…

阿里云服务器大降价20%,简单拥有五年三台2h4gECS,组建公网集群

要在阿里云ECS上组建集群&#xff0c;您可以按照以下步骤进行操作&#xff1a; 创建ECS实例&#xff1a;登录阿里云控制台&#xff0c;选择ECS实例&#xff0c;点击“创建实例”按钮。根据实际需求选择实例的配置参数&#xff0c;例如实例规格、操作系统、网络等。根据需要选择…

如何使用视频号下载提取器提取视频,推荐2种方法使用!

视频号下载提取视频号视频&#xff0c;推荐大家2个方法&#xff01; 前者简单&#xff0c;后者较为复杂&#xff0c;不过都可以提取视频号视频&#xff0c;大家可根据实际情况来使用。 01 视频号下载工具提取器&#xff1f; 1&#xff1a;通过搜一搜的这款搜索引擎找到自己…

【InternLM 实战营笔记】大模型评测

随着人工智能技术的快速发展&#xff0c; 大规模预训练自然语言模型成为了研究热点和关注焦点。OpenAI于2018年提出了第一代GPT模型&#xff0c;开辟了自然语言模型生成式预训练的路线。沿着这条路线&#xff0c;随后又陆续发布了GPT-2和GPT-3模型。与此同时&#xff0c;谷歌也…

【Go语言】Go语言中的数组

Go语言中的数组 1 数组的初始化和定义 在 Go 语言中&#xff0c;数组是固定长度的、同一类型的数据集合。数组中包含的每个数据项被称为数组元素&#xff0c;一个数组包含的元素个数被称为数组的长度。 在 Go 语言中&#xff0c;你可以通过 [] 来标识数组类型&#xff0c;但…

嵌入式学习-qt-Day4

嵌入式学习-qt-Day4 一、思维导图 二、作业 1.设计一个界面&#xff1a;显示系统时间&#xff1b;可以设置闹钟&#xff0c;在设置的时间到达后&#xff0c;显示五次字符串&#xff0c;并且语音播报。 Wight.h #ifndef WIDGET_H #define WIDGET_H #include <QWidget>…

《Vite 基础知识》Vitepress 技术文档站点搭建与配置

前言 简介 VitePress 是一个静态站点生成器 (SSG)&#xff0c;专为构建快速、以内容为中心的站点而设计。 简而言之&#xff0c;可构建你自己的 技术文档站点&#xff1b; 环境要求 Node.js 18 及以上版本。我使用 v20.11.0 创建 第一步&#xff1a; 全局安装 npm i vitep…

gdb调试技巧

gdb调试教程 前言gdb的调试命令显示需要调试的代码&#xff1a;l&#xff08; list &#xff09;启动调试&#xff1a;r (run)断点&#xff1a;b&#xff08;Breakpoint&#xff09;设置断点查看断点&#xff1a;info b删除断点&#xff1a;d打开断点 / 关闭断点 逐语句进行调试…

node 之 http模块

1.什么是http模块 在网络节点中&#xff0c;负责消费资源的电脑叫做客户端&#xff1b;负责对外提供网络资源的电脑&#xff0c;叫做服务器 http模块是node.js官方提供的&#xff0c;用来创建web服务器的模块&#xff0c;通过http模块提供的http.createServer()方法&#xff0c…

数仓开发环境链接

这里写目录标题 1开发工具链接大数据组件1.1 启动hiveserver21.2配置DataGrip连接1.3测试使用 2 环境问题排查思路 1开发工具链接大数据组件 1.1 启动hiveserver2 数仓开发工具datagrip 需要用到JDBC协议链接到Hive&#xff0c;需要启动hiveserver2。 cd /opt/module/hive h…

c语言day4 运算符 表达式 三大控制结构

1&#xff1a; 2&#xff1a; 输入一个年月日 计算这是这一年的第几天 17 int year,month,day;18 printf("请输入年份 月份 日期");19 scanf("%d %d %d",&year,&month,&day);20 int feb28;21 if(year%40&&year%1…

周鸿祎首堂免费课与千万网友分享“AGI趋势”

“我讲课不割韭菜&#xff0c;宗旨是免费、分享、科普、交流。AI时代技术发展迅速&#xff0c;AI知识普及尤为重要。”2月29日&#xff0c;360公司创始人周鸿祎免费课正式开启&#xff0c;全网多平台直播了AI系列第一讲“预见AGI”&#xff0c;千万网友观看。免费课上&#xff…

BUUCTF crypto做题记录(11)新手向

一、[HDCTF2019]bbbbbbrsa 题目所给的信息我汇总到以下代码中 from base64 import b64encode as b32encode from gmpy2 import invert,gcd,iroot from Crypto.Util.number import * from binascii import a2b_hex,b2a_hex import randomflag "************************…