前端上传表格，实现将excel表格转成json格式

首先安装xlsx库

npm i xlsx --save

引入

import xlsx from 'xlsx'

接下来随便写个上传，可以是原生的input 也可以是ui库的上传组件。这里使用的是antd 的upload组件

   <Upload {...store.props}>
                <Button type="primary">Click to Upload</Button>
  </Upload>

  props = {
    accept: '.xlsx',
    name: 'file',
    action: 'https://www.mocky.io/v2/5cc8019d300000980a055e76',
    headers: {
      authorization: 'authorization-text',
    },
    onChange(info) {
      // 读取表格对象
      const filereder = new FileReader()
      filereder.onload = (e => {
        const workbook = xlsx.read(e.target.result, { type: 'binary' })
        const sheetNames = workbook.SheetNames
        // 找到第一张表
        const sheet1 = workbook.Sheets[sheetNames[0]]
        // 读取内容
      return xlsx.utils.sheet_to_json(sheet1)
      })
      filereder.readAsBinaryString(info.file.originFileObj)
    },
  };

在拿到文件对象后，需要通过FileReader去将文件转成字符串格式。以供 xlsx库去解析

 const workbook = xlsx.read(e.target.result, { type: 'binary' })
workbook的一些属性可以自行打印出来看看。里面是表格的一些信息。

上述写法是组件的使用方法，基本实现步骤如下
1、拿到上传的文件流对象。
2、创建FileReader对象，来实现文件的格式转换
3、给FileReader添加onload 事件，在参数里可以拿到被转换格式的文件。
4、后续就是xlsx的api一把梭，最后xlsx.utils.sheet_to_json方法会返回json数据。

细节点：

 filereder.readAsBinaryString(info.file.originFileObj)
这里需要传入原始文件对象，原生input返回的应该可以直接用（没试过）。
ui库组件提供的一般都是包装过一层的file对象，
里面会有个属性originFileObj。这个属性的值就是原始文件对象。

xlsx.read(e.target.result, { type: 'binary' })   type值为binary。

filereder对象的onload属性不是一个函数，值为null。所以不要搞错了。我们直接给他赋值一个函数。而不是传一个函数作为参数。

上述代码中onchange函数里的代码可cv直接用，修改一下里面的变量名啥的就行。

如果是一个文件里有多张表格的话，直接在取表的地方遍历几次就行了。