当前位置: 首页 > news >正文

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、一个类的头文件如下所示&#xff0c;num初始化值为5&#xff0c;程序产生对象T&#xff0c;且修改num为10&#xff0c;并使用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; 二、程序说明 创建自定义面板集&#xff08;PaletteSet&#xff09;的C#命令方法实现。该方法名为CreatePalette&#xff…...

PHP和Node.js哪个更爽?

先说结论&#xff0c;rust完胜。 php&#xff1a;laravel&#xff0c;swoole&#xff0c;webman&#xff0c;最开始在苏宁的时候写了几年php&#xff0c;当时觉得php真的是世界上最好的语言&#xff0c;因为当初活在舒适圈里&#xff0c;不愿意跳出来&#xff0c;就好比当初活在…...

渗透实战PortSwigger靶场-XSS Lab 14:大多数标签和属性被阻止

<script>标签被拦截 我们需要把全部可用的 tag 和 event 进行暴力破解 XSS cheat sheet&#xff1a; https://portswigger.net/web-security/cross-site-scripting/cheat-sheet 通过爆破发现body可以用 再把全部 events 放进去爆破 这些 event 全部可用 <body onres…...

Linux简单的操作

ls ls 查看当前目录 ll 查看详细内容 ls -a 查看所有的内容 ls --help 查看方法文档 pwd pwd 查看当前路径 cd cd 转路径 cd .. 转上一级路径 cd 名 转换路径 …...

Keil 中设置 STM32 Flash 和 RAM 地址详解

文章目录 Keil 中设置 STM32 Flash 和 RAM 地址详解一、Flash 和 RAM 配置界面(Target 选项卡)1. IROM1(用于配置 Flash)2. IRAM1(用于配置 RAM)二、链接器设置界面(Linker 选项卡)1. 勾选“Use Memory Layout from Target Dialog”2. 查看链接器参数(如果没有勾选上面…...

Rust 异步编程

Rust 异步编程 引言 Rust 是一种系统编程语言,以其高性能、安全性以及零成本抽象而著称。在多核处理器成为主流的今天,异步编程成为了一种提高应用性能、优化资源利用的有效手段。本文将深入探讨 Rust 异步编程的核心概念、常用库以及最佳实践。 异步编程基础 什么是异步…...

图表类系列各种样式PPT模版分享

图标图表系列PPT模版&#xff0c;柱状图PPT模版&#xff0c;线状图PPT模版&#xff0c;折线图PPT模版&#xff0c;饼状图PPT模版&#xff0c;雷达图PPT模版&#xff0c;树状图PPT模版 图表类系列各种样式PPT模版分享&#xff1a;图表系列PPT模板https://pan.quark.cn/s/20d40aa…...

安卓基础(aar)

重新设置java21的环境&#xff0c;临时设置 $env:JAVA_HOME "D:\Android Studio\jbr" 查看当前环境变量 JAVA_HOME 的值 echo $env:JAVA_HOME 构建ARR文件 ./gradlew :private-lib:assembleRelease 目录是这样的&#xff1a; MyApp/ ├── app/ …...

html css js网页制作成品——HTML+CSS榴莲商城网页设计(4页)附源码

目录 一、&#x1f468;‍&#x1f393;网站题目 二、✍️网站描述 三、&#x1f4da;网站介绍 四、&#x1f310;网站效果 五、&#x1fa93; 代码实现 &#x1f9f1;HTML 六、&#x1f947; 如何让学习不再盲目 七、&#x1f381;更多干货 一、&#x1f468;‍&#x1f…...

论文笔记——相干体技术在裂缝预测中的应用研究

目录 相关地震知识补充地震数据的认识地震几何属性 相干体算法定义基本原理第一代相干体技术&#xff1a;基于互相关的相干体技术&#xff08;Correlation&#xff09;第二代相干体技术&#xff1a;基于相似的相干体技术&#xff08;Semblance&#xff09;基于多道相似的相干体…...

保姆级教程:在无网络无显卡的Windows电脑的vscode本地部署deepseek

文章目录 1 前言2 部署流程2.1 准备工作2.2 Ollama2.2.1 使用有网络的电脑下载Ollama2.2.2 安装Ollama&#xff08;有网络的电脑&#xff09;2.2.3 安装Ollama&#xff08;无网络的电脑&#xff09;2.2.4 安装验证2.2.5 修改大模型安装位置2.2.6 下载Deepseek模型 2.3 将deepse…...