vue+elementUI+XLSX.utils.sheet_to_json实现复杂表头的导入功能

<template>
  <el-upload
    ref="upload"
    :limit="1"
    action="#"
    :auto-upload="false"
    :on-change="handleFileChange"
    :before-upload="beforeUpload"
  >
    <el-button slot="trigger" size="small" type="primary">选择文件</el-button>
    <el-button
      style="margin-left: 10px;"
      size="small"
      type="success"
      @click="submitUpload"
    >上传到服务器</el-button>
  </el-upload>
</template>
 
<script>
import XLSX from 'xlsx';
 
export default {
  methods: {
    beforeUpload(file) {
      const isExcel = /\.(xlsx|xls|csv)$/.test(file.name);
      if (!isExcel) {
        this.$message.error('只能上传.xlsx、.xls、.csv 文件!');
        return false;
      }
      return true;
    },
    handleFileChange(file, fileList) {
      this.file = file.raw;
    },
    submitUpload() {
      if (!this.file) {
        this.$message.error('请选择要上传的文件');
        return;
      }
      const that = this;
      const reader = new FileReader();
      reader.onload = e => {
        const data = new Uint8Array(e.target.result);
        const workbook = XLSX.read(data, { type: 'array' });
        const firstSheetName = workbook.SheetNames[0];
        const worksheet = workbook.Sheets[firstSheetName];
        const json = XLSX.utils.sheet_to_json(worksheet, { header: 1 });
        console.log(json);
        // 这里可以将json发送到服务器进行处理
      };
      reader.readAsArrayBuffer(this.file);
    }
  }
};
</script>

这段代码使用了Element UI的<el-upload>组件来处理文件上传，并结合了FileReader和XLSX.utils.sheet_to_json来解析上传的Excel文件。用户可以选择一个Excel文件，然后上传到服务器进行处理。在上传之前，它会检查文件类型是否为Excel，并给出相应的错误提示。