vue上传表格的时候解析数据_Vue XLSX Excel解析

"自用。"

预览：

excel：

上传后用xlsx解析效果：

Vue

—

<template>  <div>        <el-upload class="upload-demo" drag action="http://127.0.0.1:3344/file" accept=".xlsx" :on-exceed="exceed"      :limit="1" :on-remove="remove" :before-upload="beforeUpload">      <i class="el-icon-upload">i>      <div class="el-upload__text">        将文件拖到此处，或        <em>点击上传em>      div>      <div class="el-upload__tip" slot="tip">1次只能上传1个xls文件，且不超过500kbdiv>    el-upload>        <el-card class="preview-excel" v-show="listTable.length != 0" style="margin-top: 20px;">      <el-table class="listTable_ele" align="center" :data="listTable" stripe height="500px" style="width:100%">        <el-table-column prop="name" label="姓名" width="200" align="center">el-table-column>        <el-table-column prop="age" label="年龄" width="200" align="center" sortable>el-table-column>        <el-table-column prop="city" label="城市" width="200" align="center">el-table-column>        <el-table-column prop="sno" label="学号" width="200" align="center">el-table-column>      el-table>    el-card>  div>template><script>  import XLSX from "xlsx";  //引入xlsx  export default {    data() {      return {        listTable: []      };    },    methods: {      //解析excel      async uploadFile(file) {        const _file = file;        const fileReader = new FileReader();        fileReader.onload = (ev) => {          try {            const data = ev.target.result;            const workbook = XLSX.read(data, {              type: 'binary'            });            for (let sheet in workbook.Sheets) {              //循环读取每个文件              const sheetArray = XLSX.utils.sheet_to_json(workbook.Sheets[sheet]);              //若当前sheet没有数据，则continue              if (sheetArray.length == 0) {                continue;              }              console.log("读取文件");              // console.log(sheetArray);              for (let item in sheetArray) {                let rowTable = {};                //这里的rowTable的属性名注意要与上面表格的prop一致                //sheetArray的属性名与上传的表格的列名一致                rowTable.name = sheetArray[item].姓名;                rowTable.age = sheetArray[item].年龄;                rowTable.city = sheetArray[item].城市;                rowTable.sno = sheetArray[item].学号;                this.listTable.push(rowTable);              }              console.log(this.listTable)            }          } catch (e) {            this.$message.warning('文件类型不正确！');          }        };        fileReader.readAsBinaryString(_file);      },      //上传1个以上文件时弹窗提示错误      exceed: function () {        this.$message.error("最多只能上传1个xls文件");      },      //删除文件      remove() {        this.listTable = [];      },      // 上传文件前      beforeUpload(file) {        // console.log(file)        this.uploadFile(file)        return false      }    }  };script>