el-upload文件上传中止

### 如何取消或中断 `el-upload` 组件的文件上传 在 Vue.js 和 Element UI 的组合环境中，如果想要实现取消或中断 `el-upload` 组件正在进行的文件上传操作，可以利用该组件提供的属性和事件来完成这一需求。具体来说： 通过设置 `auto-upload` 属性为 false 可以阻止自动上传行为，从而允许手动控制何时触发上传动作[^1]。 为了能够动态地中止正在执行的上传请求，可以在点击取消按钮时调用 `abort()` 方法。需要注意的是，此功能依赖于自定义上传逻辑(`http-request`) 来获取并保存 XMLHttpRequest 对象实例以便后续调用 abort() 方法终止连接[^2]。 下面是一个简单的例子展示了如何实现上述描述的功能： ```html <template> <div> <!-- 使用 :on-preview, :on-remove 和 :before-upload 实现更多交互 --> <el-upload ref="upload" action="" :auto-upload="false" :http-request="customUpload"> <el-button slot="trigger" type="primary">选取文件</el-button> <el-button @click="submitUpload">上传到服务器</el-button> <el-button @click="cancelUpload">取消上传</el-button> </el-upload> </div> </template> <script> export default { data () { return { xhr: null // 存储 XHR 请求对象 } }, methods: { customUpload (option) { this.xhr = new XMLHttpRequest() const formData = new FormData() formData.append('file', option.file) this.xhr.open('POST', 'your-server-url') this.xhr.send(formData) // 监听进度变化 this.xhr.upload.onprogress = function(event){ console.log((event.loaded / event.total * 100 | 0) + '%'); }; // 处理响应结果 this.xhr.onload = function(){ if(this.status === 200){ console.log('success:',this.responseText); }else{ console.error('error:',this.statusText); } }; // 错误处理 this.xhr.onerror = function(error){ console.error('An error occurred while uploading the file.', error); } // 返回一个 Promise 表明异步操作已完成 return { abort(){ this.xhr.abort(); }} }, submitUpload () { this.$refs.upload.submit(); }, cancelUpload () { if (this.xhr && this.xhr.readyState !== 4) { this.xhr.abort(); alert('已取消上传'); } else { alert('当前无上传任务可取消'); } } } } </script> ``` 在这个案例中，当用户选择了要上传的文件之后并不会立即发起 HTTP POST 请求；而是等到按下 "上传到服务器" 按钮才会真正开始传输数据。与此同时，“取消上传”按钮会检查是否存在未完成的 AJAX 调用，并尝试调用其 `abort()` 函数强行结束通信过程。

Element Plus 的 `el-upload` 组件是一个强大的文件上传组件，支持一次性上传多个文件。在使用它上传多文件时，可以按照以下步骤操作： 1. 引入依赖：首先，在 Vue 项目中安装 Element Plus，并在需要使用的组件中导入 `ElUpload` 和相关的样式。 ```html <template> <div> <el-upload :action="uploadUrl" :multiple="true" <!-- 显示为多选模式 --> :on-change="handleChange" <!-- 文件选择改变事件 --> :before-upload="beforeUpload" <!-- 预上传钩子 --> :file-list="fileList" <!-- 存储已上传文件列表 --> ref="uploadRef"> <!-- 指定文件上传按钮或区域 --> <i class="el-icon-plus"></i> 选择文件 </el-upload> </div> </template> <script> import { ElUpload } from 'element-plus'; export default { components: { ElUpload, }, data() { return { uploadUrl: 'your-api-url', // 你的服务器接收文件的URL fileList: [], // 初始化为空数组 }; }, methods: { handleChange(file) { this.fileList.push(file); // 文件选择后，将新文件添加到列表中 }, beforeUpload(file) { // 可在此检查文件大小、类型等限制 if (/* your condition */) { return false; // 返回false阻止上传 } return true; }, }, }; </script> ``` 2. 配置：`before-upload` 函数允许你在上传之前对文件进行一些预处理，如验证文件类型、大小等。如果满足条件，则返回 `true` 启动上传，否则返回 `false` 中止上传。 3. 监听状态：通过 `handleChange` 方法，你可以获取到用户选择的文件列表，以及上传过程中的状态变化。