elementUI+Vue 上传文件大小与文件类型校验

问题描述
关于elementUI文件上传校验功能实现
代码

<el-upload
accept="image/jpeg,image/gif,image/png"class="upload-demo upload-tip"
:action="uploadUrl()"
:on-preview="handlePreview"
:on-remove="handleRemove"
:on-success="onsuccsess"
:before-remove="beforeRemove"
multiple
:before-upload="beforeUpload"
:file-list="fileList">
<el-button size="small" type="primary">点击上传</el-button>
<div slot="tip" class="el-upload__tip">只能上传jpg/png/gif文件，且至少上传1张,大小不超过		200kb</div>
</el-upload>

1.文件类型校验可以有2种方式

• 第一种
  直接在el-upload中加上下面这一行就好，这适用于文件类型比较常见的，文件类型可选择性比较少时

accept="image/jpeg,image/gif,image/png"

• 第二种
  第二种适用与校验文件类型比较多时，可以在beforeUpload方法中进行过滤：

beforeUpload(file) {
var FileExt = file.name.replace(/.+\./, "");
if (['jpg','png','txt','zip', 'rar','pdf','doc','docx','xlsx'].indexOf(FileExt.toLowerCase()) === -1){
this.$message({
type: 'warning',
message: '请上传后缀名为jpg、png、txt、pdf、doc、docx、xlsx、zip或rar的附件！'
});
return false;
}
},

2.文件大小校验

• 可以在beforeUpload方法中进行过滤：

...
this.isLt2k = file.size / 1024  < 200?'1':'0';
if(this.isLt2k==='0') {
this.$message({
message: '上传文件大小不能超过200k!',
type: 'error'
});
}
return this.isLt2k==='1'?true: false;

• beforeRemove方法中需要把不符合大小的文件自动移除

beforeRemove(file, fileList) {
if(this.isLt2k==='1'||this.isLt2k === ''){
return this.$confirm(`确定移除 ${file.name}`);
} else if(this.isLt2k==='0') {
return true;
}
}

结束！！！