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ÿ…...
【kafka】Golang实现分布式Masscan任务调度系统
要求: 输出两个程序,一个命令行程序(命令行参数用flag)和一个服务端程序。 命令行程序支持通过命令行参数配置下发IP或IP段、端口、扫描带宽,然后将消息推送到kafka里面。 服务端程序: 从kafka消费者接收…...
R语言AI模型部署方案:精准离线运行详解
R语言AI模型部署方案:精准离线运行详解 一、项目概述 本文将构建一个完整的R语言AI部署解决方案,实现鸢尾花分类模型的训练、保存、离线部署和预测功能。核心特点: 100%离线运行能力自包含环境依赖生产级错误处理跨平台兼容性模型版本管理# 文件结构说明 Iris_AI_Deployme…...
深入浅出:JavaScript 中的 `window.crypto.getRandomValues()` 方法
深入浅出:JavaScript 中的 window.crypto.getRandomValues() 方法 在现代 Web 开发中,随机数的生成看似简单,却隐藏着许多玄机。无论是生成密码、加密密钥,还是创建安全令牌,随机数的质量直接关系到系统的安全性。Jav…...
Linux相关概念和易错知识点(42)(TCP的连接管理、可靠性、面临复杂网络的处理)
目录 1.TCP的连接管理机制(1)三次握手①握手过程②对握手过程的理解 (2)四次挥手(3)握手和挥手的触发(4)状态切换①挥手过程中状态的切换②握手过程中状态的切换 2.TCP的可靠性&…...
渗透实战PortSwigger靶场-XSS Lab 14:大多数标签和属性被阻止
<script>标签被拦截 我们需要把全部可用的 tag 和 event 进行暴力破解 XSS cheat sheet: https://portswigger.net/web-security/cross-site-scripting/cheat-sheet 通过爆破发现body可以用 再把全部 events 放进去爆破 这些 event 全部可用 <body onres…...
连锁超市冷库节能解决方案:如何实现超市降本增效
在连锁超市冷库运营中,高能耗、设备损耗快、人工管理低效等问题长期困扰企业。御控冷库节能解决方案通过智能控制化霜、按需化霜、实时监控、故障诊断、自动预警、远程控制开关六大核心技术,实现年省电费15%-60%,且不改动原有装备、安装快捷、…...
ESP32读取DHT11温湿度数据
芯片:ESP32 环境:Arduino 一、安装DHT11传感器库 红框的库,别安装错了 二、代码 注意,DATA口要连接在D15上 #include "DHT.h" // 包含DHT库#define DHTPIN 15 // 定义DHT11数据引脚连接到ESP32的GPIO15 #define D…...
css3笔记 (1) 自用
outline: none 用于移除元素获得焦点时默认的轮廓线 broder:0 用于移除边框 font-size:0 用于设置字体不显示 list-style: none 消除<li> 标签默认样式 margin: xx auto 版心居中 width:100% 通栏 vertical-align 作用于行内元素 / 表格单元格ÿ…...
什么是Ansible Jinja2
理解 Ansible Jinja2 模板 Ansible 是一款功能强大的开源自动化工具,可让您无缝地管理和配置系统。Ansible 的一大亮点是它使用 Jinja2 模板,允许您根据变量数据动态生成文件、配置设置和脚本。本文将向您介绍 Ansible 中的 Jinja2 模板,并通…...
#Uniapp篇:chrome调试unapp适配
chrome调试设备----使用Android模拟机开发调试移动端页面 Chrome://inspect/#devices MuMu模拟器Edge浏览器:Android原生APP嵌入的H5页面元素定位 chrome://inspect/#devices uniapp单位适配 根路径下 postcss.config.js 需要装这些插件 “postcss”: “^8.5.…...
