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

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

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

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

结束!!!

你可能感兴趣的:(vue+elementUI使用)