elementui上传多个图片-ElementUI图片上传缩略图图片卡数量限制

也想出现在这里？点击联系我~

立即下单

进入商城

进不了网站？换个网络试试！

问题描述：

在图片上传列表中，需要限制上传的图片数量。 当图片减少到最大数量限制时，上传框将被隐藏； 删除后会重新显示； 如果仅使用limit，则可以实现该功能，并且您会发现前面右侧最后一个框，可以选择文件，但无法上传；

1、使用limit限制宽度，设置动态类的显示和隐藏；

关键代码： :limit="limitCount":class="{hide:hideUpload}"

2、文件上传和文件移除时elementui上传多个图片，根据上传列表的宽度（长度）显示和隐藏上传框；

关键代码：this.hideUpload=this.fileList.length>=this.limitCount;

  export default {
    data() {
      return {
        dialogImageUrl: '',
        dialogVisible: false,
        disabled: false，
        fileList: [], // 图片上传列表
        hideUpload: false, // 是否隐藏上传框
        limitCount:8, // 图片上传的数量限制
      };
    },
    methods: {
      // 上传
      handleChange(file, fileList){
        this.fileList = fileList;
        this.hideUpload = this.fileList.length >= this.limitCount;
      }
      // 移除
      handleRemove(file) {
        console.log(file);
        /* 
            移除文件，重新设置  fileList ，编写处理方法
            this.fileList = ？？？
         */
        this.hideUpload = this.fileList.length >= this.limitCount;
      },
      // 预览
      handlePictureCardPreview(file) {
        this.dialogImageUrl = file.url;
        this.dialogVisible = true;
      },
      // 下载
      handleDownload(file) {
        console.log(file);
      }，
    }
  }

3.通过风格来控制

这里写的是scopedelementui上传多个图片，需要样式穿透/deep/。

/deep/.hide .el-upload--picture-card {
    display: none;
}

- 结尾