vue上传xlx文件

### 实现 Vue 中 XLSX 文件上传功能 为了实现在 Vue 项目中上传并处理 `.xlsx` 文件的功能，可以采用 `js-xlsx` 库来解析 Excel 文件的内容。以下是具体实现方式： #### 安装依赖包 首先，在命令行工具中执行如下指令以安装所需的库： ```bash npm install xlsx ``` #### 创建组件模板结构 定义用于拖拽上传文件的 HTML 结构，这里使用 Ant Design 的 `<a-upload-dragger>` 组件作为例子[^4]: ```html <template> <a-upload-dragger name="file" accept=".xls,.xlsx,.csv" :showUploadList="false" :multiple="true" :before-upload="beforeUpload" :customRequest="customRequest" @change="handleChange"> <p class="ant-upload-hint">点击或将文件拖拽到这里</p> </a-upload-dragger> </template> ``` #### 编写 JavaScript 方法逻辑 接下来编写相应的脚本部分，负责监听文件变化事件以及实际的数据读取操作: ```javascript <script> import XLSX from 'xlsx'; export default { data() { return {}; }, methods: { handleChange(info) { const { file } = info; if (file.status === 'uploading') { console.log('正在加载'); return; } if (!file || !file.raw) { return; } let reader = new FileReader(); reader.onload = function(e){ try{ /* 将二进制字符串转换成工作簿对象 */ var workbook = XLSX.read(this.result, {type:'binary'}); /* 获取第一个表格名称 */ var firstSheetName = workbook.SheetNames[0]; /* 获得所选的第一个表格内容 */ var worksheet = workbook.Sheets[firstSheetName]; /* 解析数据为 JSON 格式 */ var jsonData = XLSX.utils.sheet_to_json(worksheet); // 打印JSON格式的数据至控制台查看效果 console.table(jsonData); }catch(ex){ alert("无法解析该文件"); } }; reader.readAsBinaryString(file.raw); }, beforeUpload(file) { // 可在此处添加额外验证规则 return false; // 阻止默认上传行为 }, customRequest(option) { option.onCancel(); // 如果不需要自定义请求，则取消它 } } }; </script> ``` 此段代码实现了基本的文件选择器，并能够将选定的 Excel 文件转化为易于使用的 JSON 数据。