前端实现 文件本地上传excel，然后解析数据

前端实现excel 转成数据

前端实现上传文件，解析文件成数据发送给后端
html

//文件上传
<Button type="link" style={{ position: 'relative' }}>
          <input
          type="file"
          id="file"
          style={{ position: 'absolute', left: 0, top: 0, opacity: 0,  zIndex: 99 }}
          onChange={handleImport}
          accept=".xlsx, .xls"
        />
    <label htmlFor="file" style={{ position: 'absolute', left: 0, top: 0, zIndex: 1 }}>批量导入</label>
</Button>

const handleImport = file => {
    const { files } = file.target;

    // 通过FileReader对象读取文件
    const fileReader = new FileReader();
    fileReader.onload = event => {
      console.log(event, 'event');
      // try {
        const { result } = event.target;
        // 以二进制流方式读取得到整份excel表格对象
        const workbook = XLSX.read(result, { type: 'binary' });
        let data = []; // 存储获取到的数据
        // 遍历每张工作表进行读取（这里默认只读取第一张表）
        for (const sheet in workbook.Sheets) {
          if (Object.prototype.hasOwnProperty.call(workbook.Sheets, sheet)) {
            //这是关键的一步，hasOwnPropert要从Object的原型中调用
            // 利用 sheet_to_json 方法将 excel 转成 json 数据
            data = data.concat(XLSX.utils.sheet_to_json(workbook.Sheets[sheet]));
            // break; // 如果只取第一张表，就取消注释这行
          }
        }
        getExcelData(data);
        // message.success('导入完成');
      // } catch (e) {
      //   // 这里可以抛出文件类型错误不正确的相关提示
      //   message.error('文件类型不正确');
      //   return;
      // }
    };
    // 以二进制方式打开文件
    fileReader.readAsBinaryString(files[0]);
  };

//数据处理
 const getExcelData = data => {
    const excelRow = {
      姓名: 'realName',
      工号: 'empNo',
    };
    let dataSources = [];
    dataSources = data.map(item => {
      let obj = {};
      Object.keys(item).map(v => {
        if (excelRow[v]) {
          obj[excelRow[v]] = item[v];
        }
      });
      return obj;
    });
  };