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() //清除图片

最后

以上就是勤恳大象为你收集整理的element-ui图片上传组件查看和限制的全部内容，希望文章能够帮你解决element-ui图片上传组件查看和限制所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。