js读取上传文件txt内容（上传插件用的element-ui 的upload）需要注意点

最近项目中遇到需要读取上传本地文件(txt)的内容的简单需求，对里面部分内容进行校验，再进行上传操作，前端进行校验确实复杂，自己仅仅进行尝试，最后决定究竟是由后台还是前台来做这项工作。

一、html（上传插件用的element-ui的upload 上传文件类型为txt,上传个数少于等于5个，非自动上传（手动上传），关于上传文件大小貌似element-ui没有参数设置，需要在上传前的函数中进行控制）

    
        选择文件
        上传
    

二、函数

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