el-upload 照片墙 上传文件的小Dom

teleplment

 <!-- 图片 -->
        <el-row>
          <el-col :span="17">
            <el-form-item label="图片:" prop="files">
             // 添加、编辑
              <el-upload
                v-if="queryType != 'look'"
                action=""
                accept=".jpg,.png,.jpeg,.gif"
                list-type="picture-card"
                :limit="5"
                :before-upload="beforeAvatarUpload"
                :http-request="beforeUploadss"
                :on-preview="handlePictureCardPreview"
                :on-remove="handleRemove"
                :on-change="handleChange"
                :file-list="addruleForm.files"
                :class="uploadDisabled ? 'disabled' : ''"
              >
                <i class="el-icon-plus"></i>
                <div slot="tip" class="el-upload__tip">
                  只能上传jpg/png/jpeg文件，且不超过10MB,最佳比例为1：1,最大上传量5张
                </div>
              </el-upload>
             // 查看
              <div v-else>
                <el-image
                  v-for="(item, index) in imageUrlArr"
                  :key="index"
                  style="width: 100px; height: 100px"
                  :src="item.url"
                  fit="cover"
                  @click="handlePictureCardPreview(item)"
                ></el-image>
              </div>
             // 点击图片 出现弹框的组件（查看图片）
              <el-dialog :visible.sync="dialogVisible">
                <img width="100%" :src="dialogImageUrl" alt="" />
              </el-dialog>
            </el-form-item>
          </el-col>
          <el-col :span="7">
            <div class="txt">图片</div>
          </el-col>
        </el-row>

data中的变量

data() {
    return {
      queryType: "", // 0新增,1编辑,2查看
      uploadDisabled: false, // 文件超过5个  上传按钮不显示
      dialogImageUrl: "", // 查看图片所需要的路径
      dialogVisible: false, // 查看图片的弹框
      imageUrlArr: [], // 查看图片的数组
      addruleForm: {
        files: [], // 添加，编辑绑定的文件
      },
      addrules: {
        files: [{ required: true, message: "请上传证件照", trigger: "blur" }]
      }
}

methods中上传所用到的方法

methods: {
    // 上传
    handleChange(file, fileList) {
      let $this = this;
      // 事件两个参数，参数file与fileList是同时有值的。
      let a = 0;
      fileList.forEach((item, index) => {
        //在此处，对比文件名，将文件名相同的对比次数累加，
        // 相同的文件名累加值为 2 时，说明文件名已经重复，直接删掉。
        if (file.name === item.name) {
          a++;
          if (a === 2) {
            this.$message({
              message: "文件名不能重复",
              type: "info",
            });
            fileList.splice(index, 1);
          }
          $this.addruleForm.files = fileList;
        }
      });
      // 超过5张去掉上传文件的按钮
      if (fileList && fileList.length >= 5) {
        $this.uploadDisabled = true;
      }
    },
    // 上传删除
    handleRemove(file, fileList) {
      let $this = this;
      // 小于5张将上传按钮释放
      if (fileList && fileList.length < 5) {
        $this.uploadDisabled = false;
      }
      $this.addruleForm.files = fileList;
    },
    // 点击文件  弹出框用来查看图片
    handlePictureCardPreview(file) {
      let $this = this;
      $this.dialogImageUrl = file.url;
      $this.dialogVisible = true;
    },
    // 上传 文件大小  文件格式的校验
    beforeAvatarUpload(file) {
      let $this = this;
      const isLt5M = file.size / 1024 / 1024 < 10;
      const isJPG =
        file.type === "image/jpeg" ||
        file.type === "image/png" ||
        file.type === "image/gif" ||
        file.type === "image/jpg";
      if (!isJPG) {
        $this.$message.error("上传图片只能是 jpg/jpeg/png 格式!");
      }
      if (!isLt5M) {
        $this.$message.error("上传图片大小不能超过 10MB!");
      }
      return isJPG && isLt5M;
    },
    // 禁止自动上传
    beforeUploadss() {
      return false;
    },
   // 添加
    async addRole() {
      var $this = this;
      const { addruleForm } = $this;
      var ss = [];
      let formdata = new FormData(); // 后台需要的file文件按格式
      for (var i in addruleForm) {
        if (i == "files") {
          addruleForm[i].forEach((item) => {
            ss.push({ filenames: item.name });
            formdata.append("files", item.raw);
          });
        } else {
          formdata.append(i, addruleForm[i]);
        }
      }
      formdata.append("filesName", JSON.stringify(ss));
      var res = await $this.$axios({
        method: "post",
        url: "xxx",
        data: formdata,
      });
      if (res.data.code == 0) {
        $this.$message.success("操作成功");
        $this.$router.go(-1);
      } else {
        $this.$message({
          message: res.data.message,
          type: "error",
        });
      }
    },
  // 获取该条数据 相当于数据回显
    async userData() {
      var $this = this;
      $this
        .$axios({
          method: "get",
          url:'xxx', // 对应的接口
          params: {
            id: $this.main_id,
          },
        })
        .then(function (res) {
          let rd = res.data;
          if (rd.code == 0) {
            $this.addruleForm = rd.data.data[0];
            if (rd.data.data[0].identification_photo!= "[]") {
              $this.addruleForm.files = JSON.parse(
                rd.data.data[0].identification_photo
              );
              // 查看文件的回显
              $this.imageUrlArr = JSON.parse(
                rd.data.data[0].identification_photo
              );      
            } else {
              $this.addruleForm.files = [];
            }
          } else {
            $this.$message({
              message: rd.message,
              type: "error",
            });
          }
        });
    },
}