elementUI+el-upload 上传文件大小与文件类型校验
https://blog.csdn.net/weixin_38659265/article/details/89447469
elementUI+Vue 验证上传文件的类型
https://www.jianshu.com/p/49e90bea086c
1)嵌入组件
<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>
2）第一种文件类型校验
直接在el-upload中加上下面这一行就好，这适用于文件类型比较常见的，文件类型可选择性比较少时
accept="image/jpeg,image/gif,image/png"
3）第二种适用与校验文件类型比较多时，可以在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;
}
},
4）文件大小校验
可以在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;
5）beforeRemove方法中需要把不符合大小的文件自动移除
beforeRemove(file, fileList) {
if(this.isLt2k==='1'||this.isLt2k === ''){
return this.$confirm(`确定移除 ${file.name}`);
} else if(this.isLt2k==='0') {
return true;
}
}
- 格式校验那里，如果是非法格式，只是停止上传，但前端预览展示那里还有你刚刚上传的非法格式文件。
需要在这里 清除过滤掉不展示 不符合要求的文件。
// 组件配置项
:before-remove="beforeRemove"
//--------
// 删除上传的文件
beforeRemove(file, fileList) {
// debugger
// 上传文件不合法直接情况上传预览列表，不显示上传文件预览信息
var FileExt = file.name.replace(/.+\./, '')
// 合法文件类型
if (['jpg', 'jpeg', 'png', 'text', 'zip', 'rar', 'pdf', 'doc', 'docx', 'xlsx'].indexOf(FileExt.toLowerCase()) === -1 || file.size / 1024 / 1024 > 50) {
this.fileList = []
} else {
// return this.$confirm(`确定移除${file.name}?`)
return this.$confirm(`确定移除${file.name}?`, '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
// 情况上传文件列表
this.fileList = []
this.$message({
type: 'success',
message: '删除成功!'
})
})
}
}
