效果图：

新增、编辑时：限制上传四张，当超过四张隐藏上传图标

图片放大 ：效果图

详情：回显时不显示上传图标

页面：template 部分

图片在前端存储，提交时一并给后端

:file-list="repairPlanfiles"，repairPlanfiles用来存储图片

                <el-upload:class="'uploadStay' + index":disabled="disabled":file-list="repairPlanfiles[index]"style="margin-top: 6px"accept=".jpg, .png, .jpeg, .gif"action="#":multiple="false"ref="uploadImg":auto-upload="false"list-type="picture-card":on-change="(file, fileList) => {handleFileChange(file, fileList, index);}":on-remove="(file, fileList) => {handleRemove(file, fileList, index);}"limit="4":on-preview="handlePictureCardPreview"><span slot="default" class="el-icon-plus"></span></el-upload>

要求：限制图片格式、显示图片大小、当图片超过四张隐藏上传图标

实现逻辑：新增时用imgs字段来存储新增的图片；编辑时用imgVos字段来接收新增的图片、imgs中存贮后端返回（上次存储）的图片；若为编辑状态给后端提交时：将所有的新增图片放到imgs中，之前（后端返回的图片地址）放到imgVos中

auto-upload设置为"false"，则 before-upload 会失效；只能通过on-change 事件

此处handleFileChange事件用来处理上传，当不符合条件时需手动删除，调用handleRemove事件

通过 fileList 来判断图片的数量，控制上传组件

新增、编辑代码：

    handleFileChange(file, fileList, index) {const isLt5M = file.size / 1024 / 1024 < 5;const isJPG =file.raw.type === "image/jpeg" ||file.raw.type === "image/jpg" ||file.raw.type === "image/png" ||file.raw.type === "image/gif";if (this.typesOf == "add") {if (!isJPG) {this.$message({message: "上传失败！上传图片文件只支持JPG、PNG、JPEG、GIF",type: "warning",});this.$refs.uploadImg[index].handleRemove(file);return false;}if (!isLt5M) {this.$message({message: "上传图片大小不能超过5M!",type: "warning",});this.$refs.uploadImg[index].handleRemove(file);return false;}this.form.schemes[index].imgs.push(file.raw);this.repairPlanfiles[index].push(file);} else {if (!isJPG) {this.$message({message: "上传失败！上传图片文件只支持JPG、PNG、JPEG、GIF",type: "warning",});this.$refs.uploadImg[index].handleRemove(file);return false;}if (!isLt5M) {this.$message({message: "上传图片大小不能超过5M!",type: "warning",});this.$refs.uploadImg[index].handleRemove(file);return false;}this.form.schemes[index].imgVos.push(file.raw);this.repairPlanfiles[index].push(file);}if (fileList.length == 4) {let className = `uploadStay${this.index}`;this.$nextTick(() => {let ele = document.querySelector(`.${className}`).querySelector(".el-upload--picture-card");ele.style.display = "none";});}},

删除：我这里处理的比较复杂

默认清空当前的所有图片，然后根据图片的的格式将其存储到 imgs与imgVos中

当当前数组中图片的长度小于4时，显示上传组件

    handleRemove(file, fileList, index) {this.form.schemes[index].imgs = [];this.form.schemes[index].imgVos = [];this.repairPlanfiles[index] = [];fileList.forEach((item) => {if (item.raw) {this.form.schemes[index].imgs.push(item.raw);this.repairPlanfiles[index].push(item);} else {if (item.url) {let aa = item.url.toString().split("aiops/");this.form.schemes[index].imgVos.push(aa[1]);this.repairPlanfiles[index].push(item);} else {this.form.schemes[index].imgVos.push(item);this.repairPlanfiles[index].push(item);}}});if (fileList.length < 4) {let className = `uploadStay${index}`;this.$nextTick(() => {let ele = document.querySelector(`.${className}`).querySelector(".el-upload--picture-card");ele.style.display = "";});}},

详情、编辑：图片回显

回显逻辑：将图片放入repairPlanfiles中

    viewShowImg() {//将图片赋值给files对象 处理图片回显let schemes = this.formCopy.schemeVoList;for (let i in schemes) {this.repairPlanfiles.push([]);if (schemes[i].imgs) {for (let j in schemes[i].imgs) {let obj = {};obj.url = this.PIC_URL + schemes[i].imgs[j].imgPath;this.repairPlanfiles[i].push(obj);}//处理上传组件if (schemes[i].imgs.length == 4) {let className = `uploadStay${i}`;console.log("className", className);this.$nextTick(() => {let ele = document.querySelector(`.${className}`).querySelector(".el-upload--picture-card");ele.style.display = "none";});}}}this.form.schemes = schemesCopy;},

图片放大功能

    <!-- 放大图片吗 --><div @click.stop="handleClickItem"><el-image-viewerv-if="showViewer":on-close="closeImage":url-list="imgList":z-index="5000"/></div>

逻辑methods

//放大handlePictureCardPreview(file) {this.imgList.push(file.url);this.showViewer = true;},handleClickItem(e) {if (e.target.getAttribute("class") === "el-image-viewer__mask") {this.imgList = [];this.showViewer = false;}},
//关闭closeImage() {this.imgList = [];this.showViewer = false;},

因小编项目图片数组可以动态累加，相对有点复杂，若你们的不存在动态添加，只有一条，页面

 :file-list="repairPlanfiles"即可；回显时也不用循环 :给repairPlanfiles添加数组