效果图：
新增、编辑时：限制上传四张，当超过四张隐藏上传图标
图片放大 ：效果图
详情：回显时不显示上传图标
页面：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-viewer
v-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添加数组
