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

时间：2024-10-21 09:22:30

问题描述
关于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 = (/.+\./, "");       
	  if (['jpg','png','txt','zip', 'rar','pdf','doc','docx','xlsx'].indexOf(()) === -1){            
	  	this.$message({ 
	  		type: 'warning', 
	  		message: '请上传后缀名为jpg、png、txt、pdf、doc、docx、xlsx、zip或rar的附件！' 
		 });                
	 	return false;       
	  }      
},

2.文件大小校验

  • 可以在beforeUpload方法中进行过滤：
         ...
	this.isLt2k =  / 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(`确定移除 ${}`);       
	} else if(this.isLt2k==='0') {           
		return true;        
	}   
}

结束！！！

相关文章