ant design vue 上传文件 并读取excel 里的值

Ant Design Vue 提供了一个上传组件 `Upload`，通过这个组件可以上传文件到服务器，然后在服务器端读取 Excel 文件里的值。

以下是一个简单的示例：

<template>
  <div>
    <a-upload
      :before-upload="beforeUpload"
      :on-success="onSuccess"
      :show-upload-list="false"
    >
      <a-button>
        <a-icon type="upload"></a-icon> 点击上传
      </a-button>
    </a-upload>
    <div v-if="excelData">
      <table>
        <thead>
          <tr>
            <th v-for="header in excelData.headers" :key="header">{{ header }}</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(row, index) in excelData.rows" :key="index">
            <td v-for="(cell, cellIndex) in row" :key="cellIndex">{{ cell }}</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>

<script>
import XLSX from 'xlsx';

export default {
  data() {
    return {
      excelData: null,
    };
  },
  methods: {
    beforeUpload(file) {
      const isExcel = /xlsx|xls/.test(file.type);
      if (!isExcel) {
        this.$message.error('只能上传 Excel 文件!');
      }
      return isExcel;
    },
    onSuccess(response) {
      const reader = new FileReader();
      reader.onload = (event) => {
        const data = event.target.result;
        const workbook = XLSX.read(data, { type: 'binary' });
        const sheetName = workbook.SheetNames[0];
        const worksheet = workbook.Sheets[sheetName];
        const excelData = XLSX.utils.sheet_to_json(worksheet, { header: 1 });
        this.excelData = { headers: excelData[0], rows: excelData.slice(1) };
      };
      reader.readAsBinaryString(response.file);
    },
  },
};
</script>

在这个例子中，我们使用 `XLSX` 库来解析 Excel 文件。在上传成功后，我们使用 `FileReader` 对象来读取上传的文件，并将其转换为二进制字符串， 然后使用 `XLSX` 库将其转换为 JSON 数据。最后，我们将这些数据存储在 `excelData` 变量中，以供渲染。