element UI el-upload auto-upload

### Element UI el-upload 组件 auto-upload 属性用法及配置 `auto-upload` 是 Element UI 的 `el-upload` 组件中的一个属性，用于控制文件上传是否在选择文件后立即触发。如果将其设置为 `false`，则需要手动调用组件的 `submit` 方法来触发上传操作[^1]。 以下是关于 `auto-upload` 属性的具体说明和使用方法： #### 1. 基本用法 当 `auto-upload` 属性被设置为 `true`（默认值）时，用户选择文件后会立即触发上传操作。如果将其设置为 `false`，则需要通过手动调用组件实例的 `submit` 方法来执行上传操作。 ```html <el-upload action="https://jsonplaceholder.typicode.com/posts/" :auto-upload="false" :on-change="handleChange"> <el-button slot="trigger" type="primary">选取文件</el-button> <el-button style="margin-left: 10px;" @click="uploadFile">上传到服务器</el-button> </el-upload> ``` #### 2. 手动触发上传 当 `auto-upload` 设置为 `false` 时，可以通过以下方式手动触发上传： - 在模板中绑定按钮事件，调用组件实例的 `submit` 方法。 - 示例代码如下： ```javascript export default { methods: { uploadFile() { this.$refs.upload.submit(); // 调用组件实例的 submit 方法 }, handleChange(file, fileList) { console.log('文件改变：', file, fileList); } } } ``` #### 3. 自定义上传逻辑 如果需要实现自定义上传逻辑，可以结合 `http-request` 属性来实现。例如，使用 Axios 发起自定义的 HTTP 请求。 ```html <el-upload action="#" :auto-upload="false" :http-request="customUpload"> <el-button slot="trigger" type="primary">选取文件</el-button> <el-button style="margin-left: 10px;" @click="uploadFile">上传到服务器</el-button> </el-upload> ``` ```javascript export default { methods: { uploadFile() { this.$refs.upload.submit(); }, customUpload(params) { const formData = new FormData(); formData.append('file', params.file); axios.post('https://jsonplaceholder.typicode.com/posts/', formData) .then(response => { console.log('上传成功：', response); }) .catch(error => { console.error('上传失败：', error); }); } } } ``` #### 4. 注意事项 - 如果 `auto-upload` 设置为 `false`，必须确保通过 `submit` 方法手动触发上传，否则文件不会被上传。 - 在自定义上传逻辑中，可以使用 `before-upload` 钩子函数对文件进行预处理或校验。 - 如果需要显示上传进度，可以结合 `on-progress` 钩子函数实现[^2]。 ### 总结 `auto-upload` 属性提供了灵活的文件上传控制机制。通过将其设置为 `false`，可以实现更复杂的上传逻辑，例如批量上传、文件校验或自定义 HTTP 请求。