vue ElementUI使用js-xlsx导入数据

最近有一个项目要从excel表格导入数据，于是上网查找了一下，找到了js-xlsx插件。js-xlsx官网：https://github.com/SheetJS/js-xlsx

• 安装Element，不会的参考官网快速安装：
  https://element.eleme.io/#/zh-CN/component/quickstart

• 方便起见，直接使ElementUI中的Upload组件，因为是利用js-xlsx在前端读取，所以要把auto-upload设为false

<template>
  <div class="index">
    <!--     
        <input type="file" @change="importFile(this)"/>
        使用原始input标签
    -->
    <el-upload 
      ref="upload"
      action="/"
      :show-file-list="false"
      :on-change="importExcel"
      :auto-upload="false">
      <el-button
        icon="el-icon-upload"
        size="small"
        type="primary">
        上传文件
      </el-button>
    </el-upload>
  </div>
</template>

对于以上的一些属性有不懂的在Element官网有对应的解释说明：
https://element.eleme.io/#/zh-CN/component/upload

• JavaScript 代码

import XLSX from 'xlsx'
export default {
  name: 'App',
  data(){
    return{
    }
  },
  methods:{
    importExcel(file) {
        // let file = file.files[0] // 使用原始的input方法需要加上这一步
        const types = file.name.split('.')[1]
        const fileType = ['xlsx', 'xlc', 'xlm', 'xls', 'xlt', 'xlw', 'csv'].some(item => item === types)
        if (!fileType) {
          this.$message('格式错误！请重新选择')
          return
        }
        this.file2Xce(file).then(tabJson => {
          if (tabJson && tabJson.length > 0) {
            this.xlsxJson = tabJson
            console.log('数据:', this.xlsxJson)
            // xlsxJson就是解析出来的json数据,数据格式如下
            // [
            //   {
            //     sheetName: sheet1
            //     sheet: sheetData
            //   }
            // ]
        }
      })
    },
    file2Xce(file) {
      return new Promise(function(resolve, reject) {
        const reader = new FileReader()
        reader.onload = function(e) {
          const data = e.target.result
          this.wb = XLSX.read(data, {
            type: 'binary'
          })
          const result = []
          this.wb.SheetNames.forEach((sheetName) => {
            result.push({
              sheetName: sheetName,
              sheet: XLSX.utils.sheet_to_json(this.wb.Sheets[sheetName])
            })
          })
          resolve(result)
        }
        reader.readAsBinaryString(file.raw)
        // reader.readAsBinaryString(file)     //使用原始input方法
      })
    }
  },
}

效果图如下