element-ui图片上传组件查看和限制

element-ui经常遇到图片上传，然后编辑查看限制上传个数和上传提示

1、limit上传个数限制配合on-exceed属性使用
2、上传之前提示图片大小限制属性before-upload
3、上传带参数data
4、上传成功on-success和移除on-remove
5、file-list属性展示的列表数组，查看也是设置这个

html的代码

<el-upload 
	:limit="1" 
	:on-exceed="config.exceed" ref="upload" class="upload-demo" 
	:before-upload="config.onBeforeUpload" 
	:on-success="config.handleAvatarSuccess" 
	:data="config.dataParam" 
	:action="config.actionUrl"
	 :on-remove="config.handleRemove"
	  :file-list="config.fileList2" //保存当前图片对象数组
	  :multiple="false" 
	  :show-file-list="true" 
	  list-type="picture">
            <el-button size="small" type="primary">点击上传</el-button>
  </el-upload>

配置信息js 代码

config: {
        dataParam: {
          bizType: 3,
          useType: 2
        },
        actionUrl: 'api/base-fdfs/fdfs/public/upload',
        exceed:()=>{
            this.$alert('请删除后再上传', '异常提示', {
              confirmButtonText: '确定',
              type: 'warning'
            });
        },
        handleRemove: (file,fileList) => {
          this.form.picture=''
          this.config.fileList2=[] //删除此数组内的图片对象
        },
        onBeforeUpload: (file) => {
          const isIMAGE = ((file.type === 'image/jpeg') || (file.type === 'image/png') || (file.type === 'image/bmp'));
          if (!isIMAGE) {
            this.$alert('上传文件只能是图片格式（jpeg/png/bmp）', '异常提示', {
              confirmButtonText: '确定',
              type: 'warning'
            });
            return false
          }
          if(file.size/1024/1024>5){
            console.log(file.size)
            this.$alert('图片不能大于5M', '异常提示', {
              confirmButtonText: '确定',
              type: 'warning'
            });
            return false
          }
          return true
        },
        handleAvatarSuccess: (res, file) => {
          this.form.repairImages = file.response.data
        },
        fileList2: [],
      },

查看的时候还需给file-list数组设置，展示图片

 	let obj={}
	this.config.fileList2=[]
	this.$set(obj,'name','file');
	this.$set(obj,'url',response.data.picture);
	this.config.fileList2.push(obj)  

         

清除文件列表，上传组件变初始状态

 this.$refs.upload.clearFiles() //清除图片