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

最新推荐文章于 2025-07-02 17:36:39 发布

转载最新推荐文章于 2025-07-02 17:36:39 发布 · 3.7k 阅读

6 ·

CC 4.0 BY-SA版权

原文链接：https://www.jianshu.com/p/840601098d88/

vue 专栏收录该内容

1 篇文章

订阅专栏

本文详细介绍了如何在Element UI中实现文件上传，包括文件类型限制（jpg, png, gif等）、大小限制（不超过200KB）和非法文件的清理。通过beforeUpload钩子，展示了校验与错误提示的实践技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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: '删除成功!'
          })
        })
      }
    }