el-upload上传组件设置了auto-upload 后， 如何获取上传的文件

### 使用 `el-upload` 组件并设置 `auto-upload` 后获取上传文件 当使用 Element UI 的 `el-upload` 组件时，可以通过配置 `before-upload` 钩子函数来处理文件上传前的操作。即使设置了 `auto-upload="true"`，仍然可以在 `before-upload` 中访问到即将上传的文件对象。 #### 通过 `before-upload` 获取文件对象 在 `before-upload` 函数中，参数会接收到当前选中的文件对象。此函数可以用来执行一些预检逻辑，比如验证文件大小是否超过指定限制： ```javascript <template> <div> <el-upload :before-upload="handleBeforeUpload" action="" :on-success="handleSuccess" :file-list="fileList" :auto-upload="true"> <el-button type="primary">点击上传</el-button> </el-upload> </div> </template> <script> export default { data() { return { fileList: [] }; }, methods: { handleBeforeUpload(file) { const isLt10M = file.size / 1024 / 1024 < 10; if (!isLt10M) { this.$message.error('上传文件大小不能超过 10MB!'); } console.log('Selected File:', file); // 输出文件信息 return isLt10M; // 返回 true 或 false 来决定是否继续上传流程 }, handleSuccess(response, file, fileList) { console.log('Upload Success', response); } } }; </script> ``` 上述代码展示了如何利用 `before-upload` 方法拦截文件上传过程，并在此过程中打印出所选文件的信息[^1]。如果希望阻止自动上传行为，则可以让 `before-upload` 返回 `false`；反之则返回 `true` 让其正常提交给服务器[^2]。 #### 自定义触发上传时机 尽管启用了 `auto-upload=true`，也可以通过编程方式控制实际发起请求的时间点。例如，在某些情况下可能需要等待其他条件满足后再真正发送文件至服务端。此时可先禁用默认的立即上传功能 (`auto-upload=false`) 并手动调用 `.submit()` 方法实现延迟上传效果。 ```html <!-- 设置 auto-upload 属性为 false --> <el-upload ref="uploadRef" ... > ... <button @click="$refs.uploadRef.submit()">确认上传</button> ``` 这样就可以灵活调整何时启动真正的 HTTP 请求了。