vue 上传文件excel

### 实现 Vue 中的 Excel 文件上传

为了在 Vue 项目中实现 Excel 文件的上传功能，可以采用 `ant-design-vue` 的上传组件来完成文件的选择与提交，并利用 `xlsx` 库来进行 Excel 数据的读取和解析。

#### 使用 ant-design-vue 组件库进行文件上传

通过配置 `Upload` 组件的相关属性，如设置接受文件类型的 `accept` 属性为 `.xls, .xlsx` 来限定只允许选择 Excel 类型文件。当用户选择了文件之后，可以通过监听 `change` 事件获取到所选文件对象并进一步处理[^1]。

import { Upload } from 'ant-design-vue';
// ...
<template>
    <a-upload :before-upload="handleBeforeUpload">
        <a-button>点击上传</a-button>
    </a-upload>
</template>

<script setup>
const handleBeforeUpload = (file) => {
    const isExcel = file.type === 'application/vnd.ms-excel' || file.type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet';
    if (!isExcel) {
        message.error('仅支持上传 Excel 文件!');
        return false;
    }
    readFile(file);
    return false; // 阻止默认行为即不自动发起请求上传至服务器端
};
</script>

#### 解析 Excel 文件内容

对于接收到的 File 对象，可借助于 `FileReader` API 将其转换成二进制字符串形式的数据流，再调用 `XLSX.read()` 方法创建工作簿实例；最后遍历每张工作表内的单元格提取所需信息[^2]。

import XLSX from 'xlsx';

function readFile(file){
    let reader = new FileReader();
    reader.onload = function(e){
        try{
            var data = new Uint8Array(e.target.result);  
            /* 转换为字节数组 */
            var workbook = XLSX.read(data,{type:'array'});
            
            console.log(workbook.SheetNames); // 输出所有的工作表名称
            
            for(let sheet of workbook.SheetNames){ 
                let json_data = XLSX.utils.sheet_to_json(workbook.Sheets[sheet]);
                
                console.table(json_data); // 打印json格式化后的数据
                
                break;// 如果只需要第一个工作表则跳出循环
            }

        }catch(ex){
            alert("无法解析该文件");
        }
    };
    
    reader.readAsArrayBuffer(file);
}