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)})},

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

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

相关文章

好看的安全跳转单页html源码

好看的安全跳转单页html源码,效果如下 代码如下&#xff1a; <!DOCTYPE html> <html> <head> <meta charset"UTF-8"> <!--[if IE 8]><style>.ie8 .alert-circle,.ie8 .alert-footer{display:none}.ie8 .alert-box{padding-top:…

游戏服务器多少钱一台?腾讯云32元,阿里云26元

游戏服务器租用多少钱一年&#xff1f;1个月游戏服务器费用多少&#xff1f;阿里云游戏服务器26元1个月、腾讯云游戏服务器32元&#xff0c;游戏服务器配置从4核16G、4核32G、8核32G、16核64G等配置可选&#xff0c;可以选择轻量应用服务器和云服务器&#xff0c;阿腾云atengyu…

开启一个服务,将服务器指定的文件读取,传播到网上其他终端

from flask import Flask, render_template_string app Flask(__name__)app.route(/get-data) def get_data():# 读取data.txt文件的内容with open(r./2024/2/4/data.txt, r) as file:data file.read()print(data)# 返回数据的HTML表示return render_template_string(<div…

SpringBoot过滤器获取响应的参数

一、背景 在项目开发过程中&#xff0c;需要对于某些接口统一处理。 这时候就需要获取响应的报文&#xff0c;再对获取的报文进行统一处理。 二、了解过滤器 首先了解一下过滤器拦截器的区别&#xff1a; JAVA中的拦截器、过滤器&#xff1a;https://blog.csdn.net/qq_38254…

使用x86架构+Nvidia消费显卡12G显存,搭建智能终端,将大模型本地化部署,说不定是未来方向,开源交互机器人设计

1&#xff0c;大模型本地部署 视频说明地址&#xff1a; https://www.bilibili.com/video/BV1BF4m1u769/ 【创新思考】&#xff08;1&#xff09;&#xff1a;使用x86架构Nvidia消费显卡12G显存&#xff0c;搭建智能终端&#xff0c;将大模型本地化部署&#xff0c;语音交互机…

【Scala】 2. 函数

2. 函数 scala运算符、if … else …两部分和C语言类型&#xff0c;这里不再赘述&#xff0c;这里从for循环开始讲讲scala和c/c的不同之处。 2.1 for循环 scala中主要包含to和until两个关键字&#xff0c;下面分别看看两者的用法&#xff0c;看例子就行了。 (1) to的用法 …

02 动力云客之登陆界面

1. 前端登录界面 需求样式: 1. 自定义登录页面装配到main.js src下新建一个文件夹view, view下新建一个Vue Component , 名为LoginView.vue , 并选择options API Composition API用于复杂页面. 生成的LoginView.vue文件 <script> export default {//组件的名字nam…

visual studio注册码

最近在研究c/c 安装visual studio 需要注册 技术博客http://idea.coderyj.com/ 注册码 Visual Studio 2022(VS2022)激活码&#xff1a; Pro&#xff08;专业版&#xff09;: TD244-P4NB7-YQ6XK-Y8MMM-YWV2J Enterprise&#xff08;企业版&#xff09;: VHF9H-NXBBB-638P6-6JHC…

Compose | UI组件(十四) | Navigation-Data - 页面导航传递数据

文章目录 前言传参流程实例说明普通方式传值定义接受参数格式定义接受参数类型获取参数传入参数传参和接受参数效果图 结合 ViewModel 传递参数定义ViewModel在 navigation 定义 ViewModel 实例&#xff0c;并且传入 LoginScreen传入输入框中的值&#xff0c;并且跳转传值获取值…

PyTorch 中音频信号处理库torchaudio的详细介绍

torchaudio 是 PyTorch 深度学习框架的一部分&#xff0c;是 PyTorch 中处理音频信号的库&#xff0c;专门用于处理和分析音频数据。它提供了丰富的音频信号处理工具、特征提取功能以及与深度学习模型结合的接口&#xff0c;使得在 PyTorch 中进行音频相关的机器学习和深度学习…

绕过去除 union 和 select 的 SQL 注入

环境准备:构建完善的安全渗透测试环境:推荐工具、资源和下载链接_渗透测试靶机下载-CSDN博客 一、基础知识 MySQL是一个流行的开源关系型数据库管理系统(RDBMS),广泛用于Web应用、数据仓库、嵌入式应用等场景。它使用结构化查询语言(SQL)进行数据管理,支持多种操作系统…

架设游戏服务器租用价格?腾讯云和阿里云价格对比

游戏服务器租用多少钱一年&#xff1f;1个月游戏服务器费用多少&#xff1f;阿里云游戏服务器26元1个月、腾讯云游戏服务器32元&#xff0c;游戏服务器配置从4核16G、4核32G、8核32G、16核64G等配置可选&#xff0c;可以选择轻量应用服务器和云服务器&#xff0c;阿腾云atengyu…

Docker Compose实例

目录 一、前提说明 二、简单的Docker容器部署案例 1. Dockerfile 配置 2. docker-compose.yml 配置 3. application.properties 配置 4. pom.xml 配置 5. 上传文件 6. 创建基础Docker镜像 7. docker-compose.yml编排 8. 停止并删除容器编排 一、前提说明 在配置好Do…

每天一个数据分析题(一百五十四)

给定下面的Python代码片段&#xff0c;哪个选项正确描述了代码可能存在的问题&#xff1f; from scipy import stats 返回异常值的索引 z stats.zscore(data_raw[‘Age’]) z_outlier (z > 3) | (z < -3) z_outlier.tolist().index(1) A. 代码将返回数据集Age列中第…

rediss集群 三主三从集群模式

三主三从集群模式 1)、新建redis集群目录&#xff1a;7001~7006工作目录【/app/soft/redis-cluster/目下】 2&#xff09;、在7001~7006 目录下创建bin和conf 目录&#xff0c;然后将/app/soft/redis/bin目录下的文件分别拷贝到7001~7006 目录&#xff0c;然后在7001~7006 目…

datax离线同步oracle表到clickhouse实践1

时间&#xff1a;2024.01 目录1、安装启动 oracle19c 容器 2、rpm包安装clickhouse 3、datax安装 4、datax同步 目标库根据要同步的表&#xff0c;按照clickhouse建表规范建表 编写json文件 编写增量同步shell脚本&#xff0c;加入 crond 定时任务 1、安装启动 oracle19c 容器…

SparkJDBC读写数据库实战

默认的操作 代码val df = spark.read.format("jdbc").option("url", "jdbc:postgresql://localhost:5432/testdb").option("user", "username").option("password", "password").option("driver&q…

KtConnect 本地连接连接K8S工具

KT Connect简介 Kt Connect &#xff08;Kubernetes Developer Tool&#xff09;是一个阿里开源、轻量级的面向 Kubernetes 用户的开发测试环境治理辅助工具。其核心是通过建立本地到集群以及集群到本地的双向通道。 1.阿里开源&#xff0c;轻量级, 2. 安装快捷简单&#xf…

【数据结构与算法】堆 / 堆排序 / TopK问题(Heap)

文章目录 1.堆2.C语言实现堆2.1 堆结构与基本操作2.2 其它辅助操作2.3 堆的基本操作2.3.1 插入2.3.2 删除 3. 堆排序4. TopK5. 所有代码 1.堆 堆总是一棵完全二叉树&#xff0c;而完全二叉树更适合使用**顺序结构&#xff08;数组&#xff09;**存储&#xff0c;完全二叉树前h…

蓝桥杯省赛无忧 课件92 行列式

01 什么是行列式 02 行列式的性质 03 高斯消元求行列式