导入文件并解析（前端实现）

最近在做关于OA系统的项目，就多次涉及到了导入。那么如何只用前端来实现导入功能呢？

这是基于elementUI实现的

按钮

<el-upload style="margin-left: 20px;display: inline-block;" action="a" accept=".xlsx" :on-exceed="exceed"
           :limit="1" :on-remove="remove" :before-upload="beforeUpload">
  <el-button style="margin-right: 20px" icon="el-icon-download" type="info">导入</el-button>
</el-upload>

方法体

async uploadFile(file) {
  const _file = file;
  const fileReader = new FileReader();
  fileReader.onload = (ev) => {
    try {
      const data = ev.target.result;
      const workbook = XLSX.read(data, {type: 'binary'});
      for (let sheet in workbook.Sheets) {
        const sheetArray = XLSX.utils.sheet_to_json(workbook.Sheets[sheet]);
        if (sheetArray.length == 0) {
          continue;
        }
        console.log("读取文件");
        for (let item in sheetArray) {

          let rowTable = {};
          rowTable.fllowNumber = sheetArray[item].流水号;
          rowTable.deptId = sheetArray[item].费用部门;
          rowTable.dealDate = sheetArray[item].处理日期;
          rowTable.content = sheetArray[item].摘要;
          rowTable.inMoney = sheetArray[item].收款金额;
          rowTable.outMoney = sheetArray[item].付款金额;
          rowTable.businessType = sheetArray[item].业务类型;
          this.obj.incomexpList.push(rowTable)
        }
        this.uploadIncomexpList();
        console.log(this.obj.incomexpList)
      }
    } catch (e) {
      this.$message.warning('文件类型不正确！');
    }
  };
  fileReader.readAsBinaryString(_file);
}, exceed: function () {
  this.$message.error("最多只能上传1个xls文件");
}, remove() {
  this.getDataList()
}, beforeUpload(file) {
  this.uploadFile(file);
  return false
},