vue使用antdesign上传文件获取excel数据

使用 Ant Design 的 Upload 组件可以上传文件，并且可以通过一些配置来获取上传的文件数据。如果上传的文件是 Excel 文件，我们可以使用 js-xlsx 库来读取 Excel 数据。

下面是一个示例代码：

<template>
  <div>
    <a-upload
      accept=".xls,.xlsx"
      :before-upload="beforeUpload"
      :on-success="onSuccess"
    >
      <a-button>
        <a-icon type="upload" /> 点击上传
      </a-button>
    </a-upload>

    <div v-if="excelData">
      <h3>Excel 数据</h3>
      <table>
        <thead>
          <tr>
            <th v-for="(value, key) in excelData[0]">{{ key }}</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="row in excelData">
            <td v-for="value in row">{{ value }}</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>

<script>
import XLSX from 'xlsx';

export default {
  data() {
    return {
      excelData: null,
    };
  },
  methods: {
    beforeUpload(file) {
      // 只处理 Excel 文件
      const isExcel = file.type === 'application/vnd.ms-excel' || file.type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet';
      if (!isExcel) {
        this.$message.error('只能上传 Excel 文件！');
        return false;
      }
    },
    onSuccess(response) {
      // 读取 Excel 数据
      const workbook = XLSX.read(response.file.response, { type: 'array' });
      const sheetName = workbook.SheetNames[0];
      const worksheet = workbook.Sheets[sheetName];
      const data = XLSX.utils.sheet_to_json(worksheet, { header: 1 });
      // 第一行为表头，去掉
      data.shift();
      this.excelData = data;
    },
  },
};
</script>

在这个示例代码中，我们使用了 Ant Design 的 Upload 组件，并通过 `accept` 属性限制只能上传 Excel 文件。在上传之前，我们可以通过 `before-upload` 属性来判断是否是 Excel 文件，并在不是 Excel 文件的情况下给用户提示错误信息。

在上传成功后，我们可以通过 `on-success` 属性来获取上传的文件信息。`response.file.response` 是上传成功后服务器返回的文件内容，我们使用 js-xlsx 库来读取 Excel 数据，然后将数据显示在页面上。

需要注意的是，这里使用了 `XLSX.utils.sheet_to_json` 方法将 Excel 表格转换成 JSON 格式的数据，但是这个方法只能转换表格中有数据的部分，如果表格中有合并单元格等特殊情况，可能会出现转换错误的情况。