element 文件批量上传展示上传结果、失败重新上传

效果图:

 

不废话了,直接上代码!!!

HTML部分:

<template>
	<div class="container">
		<el-upload
			class="upload-demo"
			accept=".jpg,.JPG,.png,.PNG"
			action="#"
			:headers="{ 'Auth': token }"
			:multiple="true"
			:auto-upload="true"
			:http-request="uploadFile1"
			:on-progress="onProgress"
			:before-upload="beforefileListUpload"
			:show-file-list="false"
			:file-list="newFileList">
			<el-button slot="trigger" size="small" type="primary" style="margin-right: 10px">选择文件</el-button>
			<!-- <el-button class="handle-upload" size="small" type="primary" @click="uploadData()" :loading="loadingFile1">开始上传</el-button> -->
			<el-button size="small" type="danger" @click="removeAll()">清空</el-button>
		</el-upload>
		<!-- 进度条 -->
		<el-progress v-if="progressFlag" :percentage="loadProgress"></el-progress>
		<div v-for="(item,index) in newFileList" :key="item.uid" class="file-list">
			<div class="file-list-left">
				<i class="el-icon-picture-outline"></i>
				<span>{{ item.name }}</span>
			</div>
			<div class="file-list-right">
				<span v-if="item.isSuccess" style="color: green;">上传成功</span>
				<span v-if="!item.isSuccess" style="color: red;">上传失败</span>
				<span v-if="!item.isSuccess" @click="uploadFile1(item)">重新上传</span>
				<i class="el-icon-close" @click="handleRemove1(index)"></i>
			</div>
		</div>
	</div>
</template>

before-upload 也可以这样写,进行自定义传参。

:before-upload="(file) => {return beforefileListUpload('UploadFile3',item,scope.row)}"

js部分:

export default {
	data() {
		return {
			loadingFile1: false,
			token: '',
			actionUrlapi: baseUrl + 'api/ops-resource/attach/upload-uploadAllFile-link',
			loadProgress: 0, // 动态显示进度条
   			progressFlag: false, // 关闭进度条
			newFileList: [], // 保存所有选择的图片  isSuccess是否上传成功,true:成功 false:失败
			showFileList: [], // 已上传文件列表
		}
	},
	created(){
		const token = JSON.parse(window.localStorage.getItem('token'));
		this.token = token.content;
	},
	props:{
		paramsData: {
			type: Object,
			default: {}
		}
	},
	methods: {
		// 上传之前
		beforefileListUpload(file){
			let obj = {
				id:new Date(),
				name: file.name,
				isSuccess: false,
				other1:'',
				other2:'',
				file:file
			}
			this.newFileList.push(obj)
		},
		// 文件上传时
		onProgress(event, file, fileList) {
			this.progressFlag = true; // 显示进度条
			this.loadProgress = parseInt(event.percent); // 动态获取文件上传进度
			if (this.loadProgress >= 100) {
				this.loadProgress = 100
				setTimeout( () => {this.progressFlag = false}, 1000) // 一秒后关闭进度条
			}
		},
		// 上传方法
		uploadFile1(item) {
			let formData = new FormData();
			formData.append("sourceSystem", 'MES2');
			formData.append("sourceType", this.paramsData.inspectionType);
			formData.append("sourceId", this.paramsData.id);
			formData.append("hierarchyCode", 'MES2');
			formData.append("files", item.file)
			api.queryUploadUploadAllFileLink(formData).then((res) => {
				this.$message.success('上传成功!')
				this.newFileList.forEach((option) => {
					if(option.name == item.file.name){
						option.isSuccess = true;
					}
				})
				// console.log(this.newFileList,'上传结果');
			}).catch(() => {
				this.$message.error('上传失败!')
				// console.log(this.newFileList,'上传失败结果');
			})
		},
		// 删除图片
		handleRemove1(index) {
			this.newFileList.splice(index,1);
		},
		// 清空
		removeAll(){
			this.newFileList = [];
		},
	},
}

css部分:

<style scoped lang="scss">
.handle-upload{
	margin-left: 10px;
}
.file-list{
	margin: 5px 0;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	a{
		color: #409EFF;
		margin: 0 10px;
	}
	.file-list-left{
		i{
			margin-right: 10px;
		}
	}
	.file-list-right{
		span:nth-child(2){
			color: #409EFF;
			margin: 0 15px;
			cursor: pointer;
		}
		i{
			cursor: pointer;
		}
	}
}
.file-list:hover{
	background-color: #eee;
}
</style>

至此完成!!!

测试有效!!!感谢支持!!!

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

浅谈物联网在电力行业的应用

摘要&#xff1a;随着社会经济的快速发展&#xff0c;物联网技术也在各个行业中得到了广泛的应用&#xff0c;特别是在电力行业中应用物联网技术&#xff0c;也有效的促进了电力行业的现代化发展。而物联网与智能电网同样都是当代重要的高新技术以及新兴产业。所以通过对于物联…

【论文阅读】《Distilling the Knowledge in a Neural Network》

【论文阅读】《Distilling the Knowledge in a Neural Network》 推荐指数&#xff1a; 1. 动机 &#xff08;1&#xff09;虽然一个ensemble的模型可以提升模型的效果&#xff0c;但是在效率方面实在难以接受&#xff0c;尤其是在每个模型都是一个大型的网络模型的时候。 &…

共筑开源新长城 龙蜥社区走进开放原子校源行-清华大学站

6 月 28 日&#xff0c;以“聚缘于校&#xff0c;开源共行”为主题的 2023 年开放原子校源行活动在清华大学成功举行。本次活动由开放原子开源基金会和清华大学共同主办&#xff0c;来自各行业的 22 位大咖共聚校园共话开源。龙蜥社区技术专家边子政受邀进行技术分享&#xff0…

多元线性回归的梯度下降法

多维特征&#xff08;其实就是从单变量变成了多变量&#xff09; 目前为止&#xff0c;我们探讨了单变量/特征的回归模型&#xff0c;现在我们对房价模型增加更多的特征&#xff0c;例如房间数楼层等&#xff0c;构成一个含有多个变量的模型&#xff0c;模型中的特征为。 增添…

hadoop --- MapReduce

MapReduce定义&#xff1a; MapReduce可以分解为Map (映射) Reduce (规约) &#xff0c; 具体过程&#xff1a; Map : 输入数据集被切分成多个小块&#xff0c;并分配给不同的计算节点进行处理Shuffle and Sort&#xff1a;洗牌和排序&#xff0c;在 Map 阶段结束后&#xf…

Versal ACAP在线升级之Boot Image格式

1、简介 Xilinx FPGA、SOC器件和自适应计算加速平台&#xff08;ACAPs&#xff09;通常由多个硬件和软件二进制文件组成&#xff0c;用于启动这些设备后按照预期设计进行工作。这些二进制文件可以包括FPGA比特流、固件镜像、bootloader引导程序、操作系统和用户选择的应…

使用nginx部署前后端分离项目,处理跨域问题(共享cookie)

1.唠嗑 踩坑了&#xff0c;花费一天时间&#xff0c;开始对nginx配置不懂&#xff0c;老是弄错了配置文件&#xff0c;之前装的nginx ,cofnig有两个&#xff0c;nginx.config和nginx.config.def &#xff0c;开始配置我在nginx.config中配置的&#xff0c;后面一直在改def&…

谈谈VPN是什么、类型、使用场景、工作原理

作者&#xff1a;Insist-- 个人主页&#xff1a;insist--个人主页 作者会持续更新网络知识和python基础知识&#xff0c;期待你的关注 前言 本文将讲解VPN是什么、以及它的类型、使用场景、工作原理。 目录 一、VPN是什么&#xff1f; 二、VPN的类型 1、站点对站点VPN 2、…

「车型分析」控制系统典型应用车型 —— 停车机器人

如今&#xff0c;城市可用土地的日益稀缺&#xff08;城市化&#xff09;和汽车使用数量的增加&#xff08;机动化&#xff09;,为了可持续性发展和其他生活质量问题相结合&#xff0c;由此孕育出来了一种自动停车系统。停车机器人凭借其灵活、高效、标准化的停车模式&#xff…

day27 贪心算法

1.什么是贪心&#xff1f; 比如10张钞票&#xff0c;有1&#xff0c;5&#xff0c;20&#xff0c;100等面额&#xff0c;取五张&#xff0c;如何取得到数额最多的钱&#xff1f;每次取面额最大的那张钞票&#xff1b;就是每个阶段的局部最优&#xff1b;全局最优就是最后拿到的…

【高并发网络通信架构】3.引入IO多路复用(select,poll,epoll)实现高并发tcp服务端

目录 一&#xff0c;往期文章 二&#xff0c;基本概念 IO多路复用 select 模型 poll 模型 epoll 模型 select&#xff0c;poll&#xff0c;epoll 三者对比 三&#xff0c;函数清单 1.select 方法 2.fd_set 结构体 3.poll 方法 4.struct pollfd 结构体 5.epoll_cre…

plt绘图绘制主次刻度线

这里主要是介绍的坐标轴上的主次刻度的划分&#xff0c;这里需要单独引入ticker中的两个模块进行设置 MultipleLocator, FormatStrFormatter set_major_locator() 设置主刻度set_minor_locator() 设置次刻度set_major_formatter() 设置主刻度格式plt.NullLocator() 删除刻度显…

WPS/Office Excel 方向键无法切换表格

问题&#xff1a;WPS/Office Excel 方向键无法切换表格。 分析&#xff1a;键盘开启了Scroll Lock&#xff0c;导致Excel开启了滚动锁定。滚动锁定如图: 解决&#xff1a;再次按下Scroll Lock键解锁即可。&#xff08;Scroll Lock键在键盘右侧上方。&#xff09;

Java设计模式之行为型-解释器模式(UML类图+案例分析)

目录 一、基础概念 二、UML类图 三、角色设计 四、案例分析 五、总结 一、基础概念 解释器模式是指给定一个语言&#xff08;表达式&#xff09;&#xff0c;来表示它的文法&#xff0c;并定义一个解释器&#xff0c;使用该解释器来解释语言中的句子&#xff08;表达式&a…

小奇猫物语之产品经理篇(2)

小奇猫物语之产品经理篇&#xff08;2&#xff09; 喵喵提示&#xff1a;小奇的产品经理篇&#xff08;2&#xff09;来咯&#xff0c;预告一下&#xff0c;前面几篇主要是讲产品经理的思维模式以及怎样去从一个学生思维转变成一个能带领一个项目的产品经理思维&#xff0c;所…

CSDN发表文章的常用语法说明

CSDN常用语法说明 一、标题二、文本样式三、列表四、图片五、链接六、目录一级目录二级目录三级目录 七、表格八、注释九、自定义列表十、LaTeX 数学公式十一、插入甘特图十二、插入UML图十三、插入Mermaid流程图十五、插入Flowchart流程图十六、 插入类图十七、快捷键十八、脚…

macOS Sonoma 14beta 3 (23A5286i)第二个更新「附黑/白苹果镜像下载」

系统镜像下载&#xff1a; 系统介绍 黑果魏叔 7 月12 日消息&#xff0c;苹果今天发布 macOS Sonoma 14.0 Beta 3&#xff08;内部版本号&#xff1a;23A5286i&#xff09;第二个更新。 目前尚不清楚苹果为什么要发布 macOS Sonoma Beta 3 的第二个版本&#xff0c;但它可能…

WooCommerce适合企业电子商务吗?

目录 成功开展电子商务业务变得比以往任何时候都容易。市场上有几个现成的平台&#xff0c;完全有可能将一个初步的想法快速转变为在线贸易业务&#xff0c;并源源不断地收到订单。 什么是 WooCommerce&#xff1f; 为什么您应该考虑使用 WooCommerce 很灵活 重量轻且功…

家政服务小程序软件解决方案

家政服务小程序软件是近年来随着人们对家政服务需求的增长而逐渐兴起的一种数字化服务解决方案。通过小程序软件&#xff0c;用户可以轻松预约家政服务&#xff0c;包括保姆、月嫂、钟点工等&#xff0c;而且价格透明、服务规范&#xff0c;大大提高了用户对家政服务的满意度。…

C++ cin

cin 内容来自《C Primer》 cin使用>>运算符从输入流中抽取字符 int carrots;cin >> carrots;如下的例子&#xff0c;用户输入的字符串有空格 #include <iostream>int main() {using namespace std;const int ArSize 20;char name[ArSize]; //用户名char …