elementplus文件上传 excel

### 使用 Element Plus 实现 Excel 文件上传 为了实现使用 Element Plus 上传 `.xlsx` 或者 `.xls` 文件，在前端部分可以利用 `el-upload` 组件来构建文件上传界面。此组件提供了多种配置选项以便于自定义行为，比如指定允许上传的文件类型以及触发特定事件如文件选择后的回调函数。 ```html <template> <div id="app"> <!-- el-upload 组件用于创建拖拽区域 --> <el-upload class="upload-demo" drag action="https://jsonplaceholder.typicode.com/posts/" :on-success="handleSuccess" multiple :file-list="fileList" :before-upload="beforeUpload" accept=".xlsx, .xls" > <i class="el-icon-upload"></i> <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div> <div class="el-upload__tip" slot="tip">只能上传 xlsx/xls 文件</div> </el-upload> <p v-if="uploadedFileName">{{ uploadedFileName }} 已成功上传。</p> </div> </template> <script> export default { data() { return { fileList: [], // 存储已选中的文件列表 uploadedFileName: '' // 记录最新一次成功的文件名称 }; }, methods: { handleSuccess(response, file) { this.uploadedFileName = file.name; console.log('File name:', file.name); console.log('Upload status:', 'success'); }, beforeUpload(file) { const isXLSorXLSX = file.type === 'application/vnd.ms-excel' || file.type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'; if (!isXLSorXLSX) { this.$message.error('仅支持上传 XLS/XLSX 格式的文件！'); } return isXLSorXLSX; } } }; </script> ``` 上述代码片段展示了一个简单的 Vue.js 应用程序，其中包含了基于 Element Plus 的文件上传表单[^1]。这里的关键在于设置 `accept` 属性以限定可接受的 MIME 类型，并通过 `before-upload` 方法验证文件格式是否符合预期。当文件被成功提交给服务器之后，则会调用 `handleSuccess` 函数更新页面上的反馈信息。 对于后端处理方面，如果采用的是 Java Spring Boot 技术栈，那么可以通过编写相应的控制器方法接收来自客户端发送过来的数据流并解析 Excel 表格的内容[^2]。不过这部分的具体实现超出了当前讨论范围内的前端技术范畴。