云县网站建设找那家,交换友情链接的意义是什么,青海建设厅职称网站,北京科技网站制作效果图#xff1a;
新增、编辑时#xff1a;限制上传四张#xff0c;当超过四张隐藏上传图标 图片放大 #xff1a;效果图 详情#xff1a;回显时不显示上传图标
页面#xff1a;template 部分 图片在前端存储#xff0c;提交时一并给后端 :file-listrepairPlan…效果图
新增、编辑时限制上传四张当超过四张隐藏上传图标 图片放大 效果图 详情回显时不显示上传图标
页面template 部分 图片在前端存储提交时一并给后端 :file-listrepairPlanfilesrepairPlanfiles用来存储图片 el-upload:classuploadStay index:disableddisabled:file-listrepairPlanfiles[index]stylemargin-top: 6pxaccept.jpg, .png, .jpeg, .gifaction#:multiplefalserefuploadImg:auto-uploadfalselist-typepicture-card:on-change(file, fileList) {handleFileChange(file, fileList, index);}:on-remove(file, fileList) {handleRemove(file, fileList, index);}limit4:on-previewhandlePictureCardPreviewspan slotdefault classel-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.stophandleClickItemel-image-viewerv-ifshowViewer:on-closecloseImage:url-listimgList:z-index5000//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-listrepairPlanfiles即可回显时也不用循环 :给repairPlanfiles添加数组
