上传前：
上传类型不通过
正确上传后
点击删除后
不想了解原理的直接copy这个完整demo按需修改
<script lang="ts" setup> import { ElDialog, UploadProps, UploadFile, ElMessage } from "element-plus" import { ref } from "vue" const validImageFormats = ["jpg", "jpeg", "png"];//允许的文件后缀 //选择文件格式校验//并限制上传数量 const checkImageFormat = (file) => { console.log("文件格式校验"); console.log(file); // noUpload.value = true const fileFormat = file.name.split(".").pop().toLowerCase(); // 获取文件格式 if (!validImageFormats.includes(fileFormat)) { ElMessage({ type: "error", message: "商品图片格式必须为 jpg/jpeg/png" }); faceList.value = []; //删除格式不符合的文件 return false; // 阻止文件上传 } noUpload.value = true//设置为true阻止继续上传 return true; // 允许文件上传 }; const dialogImageUrl = ref(""); //预览图片路径 const dialogVisible = ref(false); //预览框可见 //删除 const handleRemove: UploadProps["onRemove"] = (file: UploadFile) => { console.log("删除图片："); console.log(faceList.value); noUpload.value = false }; //预览 const handlePictureCardPreview: UploadProps["onPreview"] = (file: UploadFile) => { dialogImageUrl.value = file.url!; dialogVisible.value = true; }; const faceList = ref([])//图片列表 const noUpload = ref(false)//不再上传 </script> <template> <div> <el-upload :class="{ disabled: noUpload }" :auto-upload="false" list-type="picture-card" :on-preview="handlePictureCardPreview" :on-change="checkImageFormat" :on-remove="handleRemove" :limit="1" ref="businessLicense" :file-list="faceList"> <el-icon v-if="faceList.length == 0"> <Plus /> </el-icon> </el-upload> <el-dialog v-model="dialogVisible"> <img w-full :src="dialogImageUrl" alt="Preview Image" /> </el-dialog> </div> </template> <style scoped> ::v-deep .disabled .el-upload--picture-card { display: none !important; } </style>
html代码：
核心代码： :class="{ disabled: noUpload }"
原理就是：当已经正确上传了一张图片后，noUpload会设置为true,表示不再上传，这时el-upload组件会被添加一个类 .disabled,接下来直接样式穿透，把匹配到的包含disabled类的.el-upload--picture-card元素隐藏掉
<el-upload :class="{ disabled: noUpload }" :auto-upload="false" list-type="picture-card" :on-preview="handlePictureCardPreview" :on-change="checkImageFormat" :on-remove="handleRemove" :limit="1" ref="businessLicense" :file-list="faceList"> <el-icon v-if="faceList.length == 0"> <Plus /> </el-icon> </el-upload> <label style=" color: rgb(243, 183, 106); ">提示：请上传员工真实人脸照片</label> <el-dialog v-model="dialogVisible"> <img w-full :src="dialogImageUrl" alt="Preview Image" /> </el-dialog>
ts部分代码：
const validImageFormats = ["jpg", "jpeg", "png"];//允许的文件后缀 //选择文件格式校验//并限制上传数量 const checkImageFormat = (file) => { console.log("文件格式校验"); console.log(file); // noUpload.value = true const fileFormat = file.name.split(".").pop().toLowerCase(); // 获取文件格式 if (!validImageFormats.includes(fileFormat)) { ElMessage({ type: "error", message: "商品图片格式必须为 jpg/jpeg/png" }); faceList.value=[]; //删除格式不符合的文件 return false; // 阻止文件上传 } noUpload.value = true//设置为true阻止继续上传 return true; // 允许文件上传 }; const dialogImageUrl = ref(""); //预览图片路径 const dialogVisible = ref(false); //预览框可见 //删除 const handleRemove: UploadProps["onRemove"] = (file: UploadFile) => { console.log("删除图片："); console.log(faceList.value); noUpload.value = false }; //预览 const handlePictureCardPreview: UploadProps["onPreview"] = (file: UploadFile) => { dialogImageUrl.value = file.url!; dialogVisible.value = true; }; const faceList = ref([])//图片列表 const noUpload = ref(false)//不再上传
css代码：
::v-deep .disabled .el-upload--picture-card { display: none !important; }
