最近项目中遇到需要读取上传本地文件(txt)的内容的简单需求,对里面部分内容进行校验,再进行上传操作,前端进行校验确实复杂,自己仅仅进行尝试,最后决定究竟是由后台还是前台来做这项工作。
一、html(上传插件用的element-ui的upload 上传文件类型为txt,上传个数少于等于5个,非自动上传(手动上传),关于上传文件大小貌似element-ui没有参数设置,需要在上传前的函数中进行控制)
<el-upload class="upload-demo" ref="upload" action="http://13.com" :on-change="fileChange":file-list="fileList" :auto-upload="false" accept=".txt" :before-upload="beforeUpload" :limit="5">
<el-button slot="trigger" size="small" type="primary">选择文件</el-button>
<el-button style="margin-left: 10px;" size="small" type="primary" @click="submitUpload">上传</el-button>
</el-upload>
二、函数
beforeupload函数是点击上传时触发操作(返回值true或false来就决定是否执行上传操作),但若是要在这个函数中校验,在上传前才进行确认我觉得不是很合理,应该在上传文件时若符合条件,就显示在列表中,若不符合就不显示并做提示,当然在beforeupload函数也是可以的,仅个人见解;
在filechange 中进行校验
fileChange(file,fileList){
var that = this;
var isLtM = file.size / 1024 / 1024 < 5;//文件大小不能大于5m
if(!isLtM){
this.$message({
message: '上传文件大小不能超过 5MB!',
type: 'warning'
});
if(!isLtM){
for(var i = 0;i<fileList.length;i++){
if(file==fileList[i]){
fileList.splice(i,1); //大于5m上传列表不显示,当前函数无返回值所以无法控制
}
}
}
}else{
that.format(file,fileList); //做校验函数
}
},
format(file,fileList){
var that = this;
if (file.raw) {
let reader = new FileReader();//读取文件内容
reader.readAsText(file.raw,'gb2312'); //防止中文乱码问题,不加reader.onload方法都不会触发
reader.onload = function (e) {
that.contentHtml = e.target.result;//txt文本内容,接下来就可以对其进行校验处理了
}
}
},
beforeUpload(file){
//也可以在里面进行校验,返回值为true,会触发上传操作,false不触发可以根据此值来进行一系列操作
// return value;
},