利用饿了么upload和xlsx把excel转成数组为后面实现批量导入数据

依赖

// 
npm i element-ui -S
import { Upload} from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use( Upload);
//
npm i xlsx -S

HTML

<el-upload
      class="upload-demo"
      action
      accept=".xlsx,.xls"
      :show-file-list="false"
      :auto-upload="false"
      :on-change="onChange"
    >
      <el-button size="small" type="primary">批量导入</el-button>
</el-upload>

js

import xlsx from "xlsx";
export default {
  methods: {
    // 转二进制  
    readFile(file) {
      return new Promise((resolve) => {
        let reader = new FileReader();
        reader.readAsBinaryString(file);
        reader.onload = (ev) => {
          resolve(ev.target.result);
        };
      });
    },
    // 文件状态改变时的钩子
    async onChange(ev) {
      let file = ev.raw;
      if (!file) return;
      let data = await this.readFile(file);
      let workbook = xlsx.read(data, { type: "binary" }),
        worksheet = workbook.Sheets[workbook.SheetNames[0]];
      data = xlsx.utils.sheet_to_json(worksheet);
      let arr = [];
      data.forEach((item) => {
        arr.push({
          name: item["姓名"],
          age: item["性别"],
        });
      });
        //   经转换后
      console.log(arr)
    },
  },
};