elementui上传文件不允许重名
需求:
用户可以多文件上传 ,在上传到服务器之前需要检查服务器中有无重名的文件,如果有会返回重名文件的名称数组,这些文件需要一个一个的向用户确认是否要覆盖重传。确认完毕后再上传到服务器。
检查文件重名:
//上传文件uploadFile() {let _this = this;// 未选择文件if (_this.fileLength === 0) {_this.$message({message: '请先选择 [文件] 后在点击上传!',type: 'warning'});return;}// 检查重名文件let fileListForm = new FormData();let noUploadFileList = []; //不覆盖上传的const arrayList = _this.fileList.map(file => file.name);console.log("将要上传的文件名:", arrayList);arrayList.forEach(fileName => {fileListForm.append("file_name", fileName); });let fileListConfig = {method: 'post',url: _this.checkFiles,headers: {"Content-Type": "multipart/form-data;charset=utf-8",},data: fileListForm};_this.$ajax(fileListConfig).then(async res => {console.log("检查是否重复:", res.data);let repeatArray = res.data; // 后端返回重复文件名数组if (repeatArray.length > 0) {for (const file of repeatArray) {await _this.deleteRepeat(file, noUploadFileList);}}console.log("noUploadFileList:", noUploadFileList);//进行上传//删除不覆盖上传的文件_this.fileList = _this.fileList.filter(file => !noUploadFileList.includes(file.name));console.log("新的上传列表:", _this.fileList);_this.fileLength = _this.fileList.length;if (_this.fileLength === 0) {return;}//进行上传await _this.performUpload();}).catch(err => {console.log(err);});},
异步函数,一个一个文件的确定用户哪些需要覆盖上传,
//file:重名文件
//noUploadFileList:不需要覆盖上传的文件名数组async deleteRepeat(file, noUploadFileList) {let _this = this;try {// 等待用户的确认await _this.$confirm(file + '文件已上传至服务器, 是否覆盖上传?', '提示', {confirmButtonText: '确定',cancelButtonText: '取消',type: 'warning'});// 如果await下面的代码执行了,意味着用户确认覆盖_this.$message({type: 'success',message: '覆盖文件成功!'});} catch (error) {// 如果进入catch块,意味着用户点击了取消_this.$message({type: 'success',message: '已取消文件覆盖!'});noUploadFileList.push(file);}},
上传服务器:
performUpload() {let _this = this;// 配置请求的相关参数//loading开启_this.is_loading = true//配置请求的相关参数let formData = new FormData()let config = {method: 'post',url: this.uploadUrl,headers: {"Content-Type": "multipart/form-data;charset=utf-8",},data: formData}console.log("正在上传:", _this.fileList);//单个文件,可编辑作者和文件密级if (_this.fileLength === 1) {formData.append("file", _this.fileList[0].raw)formData.append("author", _this.edit_author)//默认编写人为空,密级为非密if (_this.secret_level === '') {_this.secret_level = 0}formData.append("confidentiality", _this.secret_level)}//多文件if (_this.fileLength > 1) {_this.fileList.forEach(file => {formData.append("file", _this.fileList.raw)formData.append("author", _this.edit_author)formData.append("confidentiality", 0)})}//请求后端_this.$ajax(config).then(res => {// console.log(res)if (res) {_this.is_loading = false_this.is_done = trueif (_this.is_done) {console.log("上传成功!!!!!");_this.$message({message: '上传成功',type: 'success'});_this.fileList = []_this.show = true}_this.edit_author = ''_this.secret_level = ''} else {_this.is_loading = false_this.$message.error('后台连接错误');_this.fileList = []console.log("res failed")}}).catch(err => {_this.is_loading = false_this.$message.error('后台连接错误');console.log(err)})},
相关文章:
elementui上传文件不允许重名
需求: 用户可以多文件上传 ,在上传到服务器之前需要检查服务器中有无重名的文件,如果有会返回重名文件的名称数组,这些文件需要一个一个的向用户确认是否要覆盖重传。确认完毕后再上传到服务器。 检查文件重名: //上传…...

鸿蒙(HarmonyOS)项目方舟框架(ArkUI)之Video媒体组件
鸿蒙(HarmonyOS)项目方舟框架(ArkUI)之Video媒体组件 一、操作环境 操作系统: Windows 10 专业版、IDE:DevEco Studio 3.1、SDK:HarmonyOS 3.1 二、Video媒体组件 用于播放视频文件并控制其播放状态的组件。 子组件 无 接口…...

Linux操作系统运维-Docker的基础知识梳理总结
Linux操作系统运维-Docker的基础知识梳理总结 docker用来解决不同开发人员软件调试时环境不统一的问题,保证了程序调试时运行环境的一致性。docker的设计理念便是一处镜像,处处运行,即通过产生用户软件,运行环境及其运行配置的统一…...

PMP考试成绩如何查询?
PMP考试成绩已经陆续出来了,出成绩时间大概一周左右,没收到的别着急,先把如何查询成绩路径弄清楚。 【如何查询成绩】 1、输入网址(PMI官网,不知道网址的私戳),点击 Log In 如果忘记 PMI 的账…...
【Scala】 2. 函数
2. 函数 scala运算符、if … else …两部分和C语言类型,这里不再赘述,这里从for循环开始讲讲scala和c/c的不同之处。 2.1 for循环 scala中主要包含to和until两个关键字,下面分别看看两者的用法,看例子就行了。 (1) to的用法 …...

14.0 Zookeeper环球锁实现原理
全局锁是控制全局系统之间同步访问共享资源的一种方式。 下面介绍zookeeper如何实现全民锁,讲解他锁和共享锁两类全民锁。 排他锁 排他锁(Exclusive Locks),又被称为写锁或独占锁,如果事务T1对数据对象O1加上排他锁…...
课时16:本地变量_普通变量
2.2.2 普通变量 学习目标 这一节,我们从 基础知识、简单实践、小结 三个方面来学习。 基础知识 变量分类 所谓的本地变量就是:在当前系统的某个环境下才能生效的变量,作用范围小。本地变量按照变量值的生成方式包含两种:普通…...

阿里云服务器centos_7_9_x64位,3台,搭建k8s集群
目录 1.环境信息 2.搭建过程 2.1 安装Docker源 2.2 安装Docker 2.3 安装kubeadm,kubelet和kubectl 2.4 部署Kubernetes Master(node1) 2.5 安装Pod网络插件(CNI) 2.6 加入Kubernetes Node 2.7 测试kubernetes集群 3.部署 Dashboard…...
代码随想录第二十八天
第七章 回溯算法part04 ● 93.复原IP地址 ● 78.子集 ● 90.子集II 详细布置 93.复原IP地址 本期本来是很有难度的,不过 大家做完 分割回文串 之后,本题就容易很多了 题目链接/文章讲解:https://programmercarl.com/0093.%E5…...

【python】绘制爱心图案
以下是一个简单的Python代码示例,它使用turtle模块绘制一个代表爱和情人节的心形图案。 首先,请确保计算机上安装了Python和turtle模块。然后,将以下代码保存到一个.py文件中,运行它就可以看到爱心图案的绘制过程。 import turt…...

在 Elastic Agent 中为 Logstash 输出配置 SSL/TLS
要将数据从 Elastic Agent 安全地发送到 Logstash,你需要配置传输层安全性 (TLS)。 使用 TLS 可确保你的 Elastic Agent 将加密数据发送到受信任的 Logstash 服务器,并且你的 Logstash 服务器从受信任的 Elastic Agent 客户端接收数据。 先决条件 确保你…...

Vue中对虚拟DOM的理解
作为现代前端开发中的主流框架之一,Vue.js是一个非常流行的JavaScript框架,其核心概念之一就是虚拟DOM(Virtual DOM)。在本篇文章中,我们将深入探讨Vue中虚拟DOM的概念,并讨论为什么它在前端开发中如此重要…...
golang通用后台管理项目——Go+Vue通用后台管理项目实战
GoVue通用后台管理项目实战 1、掌握组件中业务逻辑抽离的方法 2、掌握jwt,日志,跨域,鉴权中间件的使用 3、掌握基于gorm的sql多表查询 4、掌握gin-swag的应用 5、掌握go语言开发前后端分离项目的能力 6、从0到1开发完整前后端分离项目的能力 技术栈: go后端 ging…...

推动海外云手机发展的几个因素
随着科技的不断发展,海外云手机作为一种新兴技术,在未来呈现出令人瞩目的发展趋势。本文将在用户需求、技术创新和全球市场前景等方面,探讨海外云手机在未来的发展。 1. 用户需求的引领: 随着人们对移动性和便捷性的需求不断增长&…...

python coding with ChatGPT 打卡第17天| 二叉树:找树左下角的值、路径总和
相关推荐 python coding with ChatGPT 打卡第12天| 二叉树:理论基础 python coding with ChatGPT 打卡第13天| 二叉树的深度优先遍历 python coding with ChatGPT 打卡第14天| 二叉树的广度优先遍历 python coding with ChatGPT 打卡第15天| 二叉树:翻转…...

2020年通信工程师初级 综合能力 真题
文章目录 第1章 通信职业道德,1-4第2章 法律法规,5-16第3章 计算机应用基础,第5章 现代通信网,38英语题,91 第1章 通信职业道德,1-4 1、职业道德在形式上具有()特点。 A.一致性 B.统一性 C.多样性 D.一般性…...

12.0 Zookeeper 数据同步流程
在 Zookeeper 中,主要依赖 ZAB 协议来实现分布式数据一致性。 ZAB 协议分为两部分: 消息广播崩溃恢复 消息广播 Zookeeper 使用单一的主进程 Leader 来接收和处理客户端所有事务请求,并采用 ZAB 协议的原子广播协议,将事务请求…...

作业2.6
一、填空题 1、一个类的头文件如下所示,num初始化值为5,程序产生对象T,且修改num为10,并使用show()函数输出num的值10。 #include <iostream.h> class Test { private: static int num; public: Test(int); void sh…...
Qt应用软件【协议篇】TCP示例
文章目录 TCP协议简介Qt中的TCP编程完整代码示例实际使用中的技巧实际使用中的注意事项TCP协议简介 TCP(传输控制协议)是一种面向连接的、可靠的、基于字节流的传输层通信协议。与UDP不同,TCP提供了数据包排序、重传机制、流量控制和拥塞控制,确保了数据传输的可靠性和顺序…...

C# CAD交互界面-自定义面板集(四)
运行环境 vs2022 c# cad2016 调试成功 一、引用 using Autodesk.AutoCAD.Runtime; using Autodesk.AutoCAD.Windows; using System.Windows.Forms; 二、程序说明 创建自定义面板集(PaletteSet)的C#命令方法实现。该方法名为CreatePaletteÿ…...

页面渲染流程与性能优化
页面渲染流程与性能优化详解(完整版) 一、现代浏览器渲染流程(详细说明) 1. 构建DOM树 浏览器接收到HTML文档后,会逐步解析并构建DOM(Document Object Model)树。具体过程如下: (…...
Matlab | matlab常用命令总结
常用命令 一、 基础操作与环境二、 矩阵与数组操作(核心)三、 绘图与可视化四、 编程与控制流五、 符号计算 (Symbolic Math Toolbox)六、 文件与数据 I/O七、 常用函数类别重要提示这是一份 MATLAB 常用命令和功能的总结,涵盖了基础操作、矩阵运算、绘图、编程和文件处理等…...
Element Plus 表单(el-form)中关于正整数输入的校验规则
目录 1 单个正整数输入1.1 模板1.2 校验规则 2 两个正整数输入(联动)2.1 模板2.2 校验规则2.3 CSS 1 单个正整数输入 1.1 模板 <el-formref"formRef":model"formData":rules"formRules"label-width"150px"…...
iOS性能调优实战:借助克魔(KeyMob)与常用工具深度洞察App瓶颈
在日常iOS开发过程中,性能问题往往是最令人头疼的一类Bug。尤其是在App上线前的压测阶段或是处理用户反馈的高发期,开发者往往需要面对卡顿、崩溃、能耗异常、日志混乱等一系列问题。这些问题表面上看似偶发,但背后往往隐藏着系统资源调度不当…...

【JVM面试篇】高频八股汇总——类加载和类加载器
目录 1. 讲一下类加载过程? 2. Java创建对象的过程? 3. 对象的生命周期? 4. 类加载器有哪些? 5. 双亲委派模型的作用(好处)? 6. 讲一下类的加载和双亲委派原则? 7. 双亲委派模…...
LRU 缓存机制详解与实现(Java版) + 力扣解决
📌 LRU 缓存机制详解与实现(Java版) 一、📖 问题背景 在日常开发中,我们经常会使用 缓存(Cache) 来提升性能。但由于内存有限,缓存不可能无限增长,于是需要策略决定&am…...
【Android】Android 开发 ADB 常用指令
查看当前连接的设备 adb devices 连接设备 adb connect 设备IP 断开已连接的设备 adb disconnect 设备IP 安装应用 adb install 安装包的路径 卸载应用 adb uninstall 应用包名 查看已安装的应用包名 adb shell pm list packages 查看已安装的第三方应用包名 adb shell pm list…...
LangFlow技术架构分析
🔧 LangFlow 的可视化技术栈 前端节点编辑器 底层框架:基于 (一个现代化的 React 节点绘图库) 功能: 拖拽式构建 LangGraph 状态机 实时连线定义节点依赖关系 可视化调试循环和分支逻辑 与 LangGraph 的深…...
LOOI机器人的技术实现解析:从手势识别到边缘检测
LOOI机器人作为一款创新的AI硬件产品,通过将智能手机转变为具有情感交互能力的桌面机器人,展示了前沿AI技术与传统硬件设计的完美结合。作为AI与玩具领域的专家,我将全面解析LOOI的技术实现架构,特别是其手势识别、物体识别和环境…...

VisualXML全新升级 | 新增数据库编辑功能
VisualXML是一个功能强大的网络总线设计工具,专注于简化汽车电子系统中复杂的网络数据设计操作。它支持多种主流总线网络格式的数据编辑(如DBC、LDF、ARXML、HEX等),并能够基于Excel表格的方式生成和转换多种数据库文件。由此&…...