vue-cli+element-ui+xlsx 实现导入excel数据到前端页面展示

需求：
将excel 表格中的数据导入前端页面，并展示到表格中。在读取到excel 中的数据后会将每一条数据作为一个对象，存储到数据模型的一个数组中，这样便于渲染数据到表格，也便于后续将数组存储到后台。
安装插件xlsx：
npm install --save xlsx
完整代码：

<template>
  <div>
    <!-- 按钮 -->
    <el-upload
      class="upload"
      action=""
      :multiple="false"
      :show-file-list="false"
      accept="csv, application/vnd.ms-excel, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
      :http-request="httpRequest"
    >
      <el-button size="small" type="primary">上传</el-button>
    </el-upload>
    <!-- 按钮 end -->
    <br />
    <!-- 列表 -->
    <el-table :data="tableData" border style="width: 100%">
      <el-table-column prop="ID" label="ID" width="180"> </el-table-column>
      <el-table-column prop="name" label="名字"> </el-table-column>
    </el-table>
    <!-- 列表 end -->
  </div>
</template>

<script>
import XLSX from 'xlsx'

export default {
  data() {
    return {
      tableData: []
    }
  },
  methods: {
    httpRequest(e) {
      const file = e.file // 文件信息
      console.log('e: ', e)
      console.log('file: ', e.file)

      if (!file) {
        // 没有文件
        return false
      } else if (!/\.(xls|xlsx)$/.test(file.name.toLowerCase())) {
        // 格式根据自己需求定义
        this.$message.error('上传格式不正确，请上传xls或者xlsx格式')
        return false
      }

      const fileReader = new FileReader()
      fileReader.onload = ev => {
        try {
          const data = ev.target.result
          const workbook = XLSX.read(data, {
            type: 'binary' // 以字符编码的方式解析
          })
          const exlname = workbook.SheetNames[0] // 取第一张表
          const exl = XLSX.utils.sheet_to_json(workbook.Sheets[exlname]) // 生成json表格内容
          console.log(exl)
          // 将 JSON 数据挂到 data 里
          this.tableData = exl
          console.log(this.tableData)
          // document.getElementsByName('file')[0].value = '' // 根据自己需求，可重置上传value为空，允许重复上传同一文件
        } catch (e) {
          console.log('出错了：：')
          return false
        }
      }
      fileReader.readAsBinaryString(file)
    }
  }
}
</script>
<style lang="less" scoped></style>