Upload上传图片，回显图片，编辑图片，限制图片，不显示上传图标，图片放大功能

效果图：

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

图片放大 ：效果图

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

页面：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添加数组