Elementui el-upload 图片列表缩略图模式添加查看大图含删除功能

前言：由于官网el-upload 图片列表缩略图模式没有查看大图的功能，所有自己自定义了一个，其中很多投机取巧的方式，写的不好，若有更好的方法，请留言哦(^▽)，不多说废话，直接贴

<template>
<el-upload 
	class="upload-el" 
	accept=".jpg,.png,.bmp" //限制上传的图片类型
	:show-file-list="true" //是否显示已上传文件列表
	multiple //设置多选
	:limit="3" //最大允许上传个数
	:on-exceed="handleExceed" //文件超出个数限制时的钩子
	:file-list="fileArr" //上传的文件列表
	:action="uploadConfig.uploadFileUrl" //必选参数，上传的地址
	:headers="uploadConfig.headers" //设置上传的请求头部例如一些token信息
	:on-error="uploadError" //文件上传失败时的钩子
	:on-success="uploadSuccess" //文件上传成功时的钩子
	list-type="picture">
	<el-button size="small" class="uplaodBtn">上传</el-button>
	<template #tip>
		<div class="el-upload__tip">请上传格式为jpg、png、bmp的图片，且确保图片内容清晰可见</div>
		   <!-- 关键代码在这里，这段代码是我将list-type="picture"的时候显示出来的缩略图的代码复制出来修改的 这里无法覆盖原来的picture，所有我在ul里面加了一个show的类名，然后在样式里面将原来的隐藏了，机智吧 (*^▽^*) -->
			<ul class="el-upload-list el-upload-list--picture show">
				<li v-for="(item,index) in fileArr"  class="el-upload-list__item is-success" tabindex="0">
					<!--scanBigImg：查看大图的方法  -->
					<img style="cursor: pointer;"  
					     @click="scanBigImg(item)"  
					     class="el-upload-list__item-thumbnail"
						 :src="item.url">
					<a class="el-upload-list__item-name">
					<i class="el-icon-document"></i>
					{{item.name}}
					</a>
					<label class="el-upload-list__item-status-label">
						<i class="el-icon-upload-success el-icon-check"></i>
					</label>
					<!-- onRemove：删除已上传的图片文件 -->
					<i class="el-icon-close" @click="onRemove(item,fileArr)"></i>
				</li>
			</ul>
	</template>
</el-upload>
<!-- 显示大图的dialog  -->
<el-dialog v-model="dialogVisible" style="height: 500px; width: 100%; text-align: center;">
	<img style="width: auto; max-width: 100%; height: auto; max-height: 500px; display: inline-block;margin: auto;" :src="dialogImageUrl" alt="">
</el-dialog>
</template>
<script>
import {ref,reactive} from "vue";
import {ElMessage} from "element-plus";
export default {
	setup() {
	   //这个query不重要哈，这里是我后面需求一次性提交给后台需要用到的
		const query = reactive({
				name: "",
				fileUrlArr: []
			});
		const dialogImageUrl = ref(''),//大图的url
			  dialogVisible = ref(false);
		let fileArr = ref([]);//存放上传成功的文件信息
			const uploadConfig = reactive({
				uploadFileUrl: 'api/uploadFile',//文件上传接口路径
				headers: {
					'token':'这是设置的token信息，根据自己需求设置'
				}
			})

			const uploadError = (res, file) => {
				//上传失败做的操作
				ElMessage.error(res.message);
			}
			const uploadSuccess = (res, file,fileList) => {
			    //上传成功做的操作
				fileArr.value = fileList;//这里将fileList赋值给fileArr，主要是为了后面自定义的缩略图展示那里遍历展示
				query.fileUrlArr.push(res.data);//不重要
			}
			//删除
			const onRemove = (file,fileList) => {
				let arr = fileList,newArr = [];
				for(let i=0;i<arr.length;i++){
					if(file != arr[i]){
						newArr.push(arr[i])
					}
				}
				fileArr.value = newArr;
				query.filePathList.splice(file.response.data, 1)
			}
			//查看大图
			const scanBigImg = (file) => {
				dialogImageUrl.value = file.url;
				dialogVisible.value = true;
			}
			//限制上传个数警告
			const handleExceed = (files, fileList) => {
				ElMessage.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
			}
	}
}
</script>
<style scoped>
	:deep(.el-upload-list.el-upload-list--picture){
		display: none!important;//这里设置原有的缩略图视图影藏
	}
	.el-upload-list.el-upload-list--picture.show{
		display: block!important;//展示自己自定义的
	}
</style>