input上传文件，前端判断文件的大小及类型

由于项目需要，需要实现该功能纪录如下。

上传文件时，由前端判断文件的大小及类型。举例说明：要求上传的文件小于10MB的文件，并且文件类型必须为.txt类型。关键核心代码如下：

html代码：<input type="file" @change="getFile($event)">

js代码：

getFile(event) {
  console.log(event)  // 这里可以看整个event是什么可以输出查看
  console.log(event.target.value);
  this.file = event.target.files[0];
  // this.filename=event.target.files[0].name;//这个输出的上传文件的文件名。看需求，如果只要求输出文件名，用这个。
  this.filename = event.target.value;//这个输出的是上传文件的全路径值。看需求，如果要求输出上传文件的全路径，用这个。
  if (event.target.files[0].size > 10*1024 * 1024) {
    alert('请上传小于10MB的文件');
  } else {
    if (this.filename.indexOf("txt") != -1) {//这个判断文件的类型，是不是txt文件。及判断文件名是否包含txt
      //这段代码是单位的换算，是B  KB    MB的单位
      if (event.target.files[0].size < 1024) {
        this.filesize = event.target.files[0].size + 'B';
      } else {
        if (event.target.files[0].size < 1024 * 1024) {
          this.filesize = ((event.target.files[0].size) / 1024).toFixed(2) + 'KB';
        } else {
          this.filesize = ((event.target.files[0].size) / 1024 / 1024).toFixed(2) + 'MB';
        }
      }
    } else {
      alert('请上传txt文件')
    }
  }
}

以上问题，是实际项目中遇到并解决。如有错误或者问题，欢迎批评指正。