elementUI+el-upload 上传文件大小与文件类型校验

elementUI+el-upload 上传文件大小与文件类型校验
https://blog.csdn.net/weixin_38659265/article/details/89447469

elementUI+Vue 验证上传文件的类型
https://www.jianshu.com/p/49e90bea086c

1)嵌入组件

                                点击上传                                只能上传jpg/png/gif文件，且至少上传1张,大小不超过200kb                            

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;        }   
}

1. 格式校验那里，如果是非法格式，只是停止上传，但前端预览展示那里还有你刚刚上传的非法格式文件。
   需要在这里 清除过滤掉不展示 不符合要求的文件。

// 组件配置项
: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: '删除成功!'})})}}

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！