用el-upload 做表格导入功能

El-Upload 是 Element UI 中的一个组件，用于实现文件上传。要使用 El-Upload 来实现表格导入功能，您需要按照以下步骤进行操作：

1. 在页面中引入 Element UI 和 XLSX 库

<!-- 引入 Element UI -->
<link rel="stylesheet" href="//unpkg.com/element-ui/lib/theme-chalk/index.css">
<script src="//unpkg.com/vue/dist/vue.js"></script>
<script src="//unpkg.com/element-ui/lib/index.js"></script>

<!-- 引入 XLSX 库 -->
<script src="//unpkg.com/xlsx/dist/xlsx.full.min.js"></script>

2. 在页面中添加 El-Upload 组件

<template>
  <el-upload
    class="upload-demo"
    action="/upload"
    :on-success="handleSuccess"
    :before-upload="beforeUpload"
    :headers="{'Authorization': token}"
    :accept="'.xlsx'"
    :limit="1">
    <el-button size="small" type="primary">点击上传</el-button>
  </el-upload>
</template>

3. 在 Vue 实例中定义上传前的操作和上传成功后的操作

<script>
  export default {
    data() {
      return {
        token: '', // 接口认证 token
        tableData: [] // 存储上传后的数据
      };
    },
    methods: {
      // 上传前的操作
      beforeUpload(file) {
        const fileType = file.name.split('.').pop();
        if (fileType !== 'xlsx') {
          this.$message.error('仅支持上传 .xlsx 类型的文件');
          return false;
        }
      },
      // 上传成功后的操作
      handleSuccess(response, file) {
        const reader = new FileReader();
        reader.onload = e => {
          const data = new Uint8Array(e.target.result);
          const workbook = XLSX.read(data, { type: 'array' });
          const sheetName = workbook.SheetNames[0];
          const worksheet = workbook.Sheets[sheetName];
          this.tableData = XLSX.utils.sheet_to_json(worksheet);
        };
        reader.readAsArrayBuffer(file.raw);
      }
    }
  }
</script>

以上代码会在上传成功后读取 Excel 文件内容，将其解析为 JSON 格式并存储在 tableData 变量中。

注意：在上传前，需要对文件类型进行验证，只允许上传 .xlsx 类型的文件。另外，由于解析 Excel 文件需要使用 XLSX 库，因此需要在页面中引入该库。