element ui el-upload 图片上传组件间的坑点记录

 需求:使用的el-upload组件实现图片上传和图片的反显

 1.action这里可以不用写

2.limit 是限制上传的图片张数

3.multiple 上传多张图片

4. ref="upload" 后面清除图片的时候进行组件的定位

5.file-list上传了的图片集合

主要的功能代码

 //图片上传个数限制
    handleExceed(files, fileList) {
      this.$message.warning(`请最多上传 ${this.form.limit} 张图片。`);
    },

//图片上传的验证
beforeUpload(file) {
      var testmsg = /^image\/(jpeg|png|jpg|bmp)$/.test(file.type);
      const isLt4M = file.size / 1024 / 1024 <= 4; //图片大小不超过2MB
      if (!testmsg) {
        this.$message.error("上传图片格式不对!");
        this.$refs.upload.clearFiles();
        return;
      }
      if (!isLt4M) {
        this.$message.error("上传图片大小不能超过 4M!");
        return;
      }
      return testmsg && isLt4M;
    },

//删除上传了的图片
handleRemove(file) {
      console.log(file, "delete");
      let arrPic = this.$refs.upload.uploadFiles;
      let index = arrPic.indexOf(file);
      this.picList.splice(index, 1);
      let num = 0;
      arrPic.map((item) => {
        if (item.uid == file.uid) {
          arrPic.splice(num, 1);
        }
        num++;
      });
      console.log(arrPic, "arrpic");
    },

//图片上传
    httpRequest(e) {
      const file = e.file; // 文件信息
      const formData = new FormData();
      formData.append("file", file);
      uploadFile(formData).then(
        (res) => {
          /*    console.log(res, "pic"); */
          this.picList.push(res.id);
        },
        (err) => {
          this.$refs.upload.clearFiles();  //上传失败后清除当前上传的图片
        }
      );
    },

//判断当前是否上传了图片，必须上传了图片才能通过验证
handleChange1(res) {
      if (res) {
        this.isFile = true;
      }
    },

这里另外的一个需求就是从其他页面跳转回来，传递了图片的id，然后根据id展示已经上传了的图片

//判断是否存再返回的图片数据,后台返回的是字符串，需要转为数组进行处理
if (data.detailData.areaPhoto) {
            let a =
              data.detailData.areaPhoto && data.detailData.areaPhoto.split(",");
            if (a.length > 0) {
              a.forEach((item, index) => {
                var obj = {};
                this.$set(obj, "name", index);
                this.$set(
                  obj,
                  "url",
                  this.imgSrc +
                    item +
                    "?BTP_TOKEN=" +
                    this.btpToken +
                    "&BUS_SYS_CODE=BOMSManage" //拼接是的图片的url地址
                ); //修改files里面的结构（name,url）

                /*  console.log(obj, "789"); */
                this.form.fileList.push(obj);
              });
            }
          }

//提交验证的时候,再次进行是否上传了图片的验证
if (!this.isFile) {
        this.$message({
          message: "必须上传场地图片",
        });
        return false;
      }
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (isNaN(parseInt(this.form.size))) {
            this.$message.error("场地面积必须为数字!");
            return false;
          }
          if (isNaN(parseInt(this.form.people))) {
            this.$message.error("可容纳人数必须为数字!");
            return false;
          }
          if (isNaN(parseInt(this.form.book))) {
            this.$message.error("可同时预约人数必须为数字!");
            return false;
          }
}