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

效果图：

 

不废话了，直接上代码！！！

HTML部分：

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部分：

至此完成！！！

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