vue 结合element使用upload读取excel的数据并展现在表格中

先引用xlsx

npm install xlsx

遇到了xlsx是undefined，可能是版本不对，可安装"xlsx": "^0.16.0",版本的，就不会出现问题了

<el-upload
 class="upload-demo"
  action=""
  :on-change="handleChange"
  :show-file-list="false"
  :auto-upload="false"
>
  <el-button size="small" type="primary">导入</el-button>
</el-upload>
    <el-table
      :data="tableData"
      style="width: 100%">
      <el-table-column
        prop="name"
        label="姓名"
        width="180">
      </el-table-column>
      <el-table-column
        prop="phone"
        label="手机号"
        width="180">
      </el-table-column>
    </el-table>
    
import XLSX from "xlsx";

handleChange(file) {
      const _this = this
      _this.tableData = []
      const fileName = file.name;
      const reader = new FileReader();
      reader.readAsArrayBuffer(file.raw);
      reader.onload = function () {
        const buffer = reader.result;
        const bytes = new Uint8Array(buffer);
        const length = bytes.byteLength;
        let binary = "";
        for (let i = 0; i < length; i++) {
          binary += String.fromCharCode(bytes[i]);
        }
        const XLSX = require("xlsx");
        const wb = XLSX.read(binary, {
          type: "binary",
        });
        const outdata = XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]]);
        outdata.forEach((i) => {
          let obj = {
            namez: i.姓名,
            phone: i.手机号,
          };
          _this.tableData.push(obj);  //此处是把数据添加到表格中
        });
      };
    },