el-upload上传图片，限制上传数量，超过最大数量则不展示上传组件，可点击删除

1.html中布局

<el-upload
                    multiple
                    :limit="6"
                    accept="image/png"
                    action="#"
                    list-type="picture-card"
                    :http-request="uploadDetailImg"
                    :on-remove="handleRemove"
                    :file-list="fileList"
                    :on-change="handleEditChange"
                    :class="{ hide: hideUploadBtn }"
                  >
                   <!-- limit：最大上传数量 -->
                   <!-- accept：限制上传格式，不满足格式的文件被置灰 -->
                   <!-- action：上传地址 接口写在js中要用#  必选参数 -->
                   <!-- list-type：文件上传的类型 此处为 照片墙 -->
                   <!-- http-request：自定义上传 -->
                   <!-- on-remove：移除图片 -->
                   <!-- file-list：上传的文件列表 -->
                   <!-- on-change：文件状态改变时的钩子 -->
                   <!-- :class="{ hide: hideUploadBtn }": 控制上传组件是否显示 data中默认 hideUploadBtn: false -->
                    <div slot="fileList" slot-scope="{ file }">
                    <!-- 上传后的图片展示 -->
                      <img
                        class="el-upload-list__item-thumbnail"
                        :src="file.url"
                        alt=""
                        width="300px;height:300px"
                      />
                      <span class="el-upload-list__item-actions">
                        <span
                          class="el-upload-list__item-delete"
                          @click="handleRemove"
                        >
                        <!-- 删除图标 -->
                          <i class="el-icon-delete"></i>
                        </span>
                      </span>
                    </div>
                    <i class="el-icon-plus"></i>
                  </el-upload>

2.js中相应方法

//  自定义方法 上传图片 限制6张
    uploadDetailImg(file) {
    //file为点击上传时返回的文件内容
      let formData = new FormData();
      // 定义传递参数第一个值为参数名 第二个为值
      formData.append("appMiniFile", file.file);
      formData.append("type", "02");
      formData.append("token", this.token);
      // 调用上传图片的接口
      uploadPicture(formData).then((res) => {
      // 成功时拿到res中的url 赋值
        res.value = res.url;
        // 图片必传校验
        this.$set(this.form, "detailImg", res.url);
        // 上传后去掉必传提示
        this.$refs["form"].validateField("detailImg");
        // 将接口返回的数据res push到展示图片的fileList中
        this.fileList.push(res);
      });
    },
    
 // 移除图片操作
    handleRemove(file, fileList) {
    // fileList为移除后剩余的图片数组 赋值给this.fileList 则展示正确
      this.fileList = fileList;
      // 上传图片 > 6 则隐藏上传组件
      this.hideUploadBtn = fileList.length >= 6;
    },

// 最多上传6张图，超过时隐藏上传按钮
    handleEditChange(file, fileList) {
      this.hideUploadBtn = fileList.length >= 6;
    },

3.css中控制是否显示上传控件

// 隐藏上传组件
.hide {
  .el-upload--picture-card {
    display: none !important;
  }
}

4.实现效果

以上实现了限制数量的图片上传以及移除操作，若有不正确还望大神指点！😉