el -upload 取上传文件的数据

### 如何通过 `el-upload` 组件获取上传文件数据 在使用 Element UI 的 `el-upload` 组件时，可以通过监听事件来捕获上传的文件数据。具体来说，可以利用 `:on-change` 属性绑定回调函数，在该函数中访问上传的文件对象。 以下是实现此功能的一个完整示例： #### Vue 模板部分 ```html <template> <div> <!-- 使用 el-upload 组件 --> <el-upload :multiple="true" class="upload-demo" action="" :on-change="handleChange" :before-upload="handleBeforeUpload" :auto-upload="false"> <i class="el-icon-upload"></i> <div class="el-upload__text">将文件拖到此处，或 <em>点击上传</em></div> <div class="el-upload__tip" slot="tip">只能上传 .xml 文件</div> </el-upload> <!-- 显示已选中的文件列表 --> <ul v-if="fileList.length > 0"> <li v-for="(file, index) in fileList" :key="index">{{ file.name }}</li> </ul> </div> </template> ``` #### JavaScript 部分 ```javascript <script> export default { data() { return { fileList: [] // 存储已选择的文件数组 }; }, methods: { handleChange(file, fileList) { this.fileList = fileList; // 更新文件列表 console.log('当前文件:', file); // 单个文件对象 console.log('所有文件:', fileList); // 所有文件对象组成的数组 }, handleBeforeUpload(file) { const isXML = file.type === 'application/xml'; // 判断文件类型是否为 XML const isValidSize = file.size / 1024 / 1024 < 2; // 判断文件大小是否小于 2MB if (!isXML) { this.$message.error('仅支持上传 XML 格式的文件!'); } if (!isValidSize) { this.$message.error('文件大小不得超过 2MB!'); } return isXML && isValidSize; }, submitUpload() { // 提交逻辑可在此处编写 console.log('最终提交的文件列表:', this.fileList); } } }; </script> ``` #### CSS 部分（可选） 如果需要自定义样式，可以在 `<style>` 中添加相应的样式规则： ```css <style scoped> .upload-demo { margin-bottom: 20px; } .el-upload__tip { color: red; font-size: 12px; } </style> ``` --- ### 关键点解析 1. **`:on-change` 属性** - 当文件状态改变时触发（例如新增、移除），会传递两个参数：当前文件对象和整个文件列表[^1]。 2. **`:before-upload` 属性** - 在文件上传前执行校验操作，返回 `false` 或者抛出异常即可阻止上传[^1]。 3. **存储文件列表** - 将每次变化后的文件列表保存至组件的状态变量中以便后续处理[^1]。 4. **手动控制上传行为** - 设置 `:auto-upload="false"` 后，需调用 `$refs.upload.submit()` 方法显式发起上传请求[^2]。 --- ###