最标准方式是用 abortcontroller 配合 fetch api 中止上传：创建 formdata，初始化 abortcontroller 并传 signal 给 fetch，调用 abort() 可立即终止请求、关闭连接；需注意兼容性，旧版 ie 需回退至 xmlhttprequest。

在 H5 中取消正在进行的文件上传任务，最标准、现代的方式是使用 AbortController 配合 fetch API。它能真正中止请求，释放连接，避免后台静默上传或资源浪费。

确保使用 fetch + FormData 上传

AbortController 仅对基于 Promise 的异步操作（如 fetch）有效，不支持传统 XMLHttpRequest（除非手动封装）。推荐用 fetch 发送表单数据：

• 创建 FormData 实例，append 文件字段
• 初始化 AbortController，获取其 signal
• 将 signal 传入 fetch 的 options 中

调用 abort() 主动取消上传

只要上传尚未完成（包括 pending 或 uploading 状态），调用 controller.abort() 就会立即终止请求：

HTML汇报生成器

🚀 不用写一行代码！把项目总结、工作汇报、研究报告、技术文档、提案、数据看板直接变精美HTML。12种主题 × 11种背景动效 × 9种鼠标特效 × 10种边框样式 × 实时调色器 × 毛玻璃卡片 × PDF导出，生成后还能自由调色，零门槛AI直出。触发词：项目总结、工作汇报、PPT、生成报告、做个总结、HTML文档、数据报告、流程文档、会议纪要、技术文档、研究报告、数据看板、提案、做个展示页、帮我做个汇报、文档生成。

下载

• fetch Promise 会以 AbortError 拒绝（catch 中可捕获 err.name === 'AbortError'）
• 浏览器停止发送剩余数据，关闭底层连接
• 后续不能再复用该 signal，需新建 AbortController 发起新请求

配合 UI 实现“取消按钮”逻辑

常见场景是用户点击「取消上传」按钮，需安全地中断当前任务并清理状态：

• 声明一个可访问的 controller 变量（如组件级 ref 或闭包变量）
• 上传开始时创建新 AbortController 并保存引用
• 取消按钮点击时检查 controller 是否存在且未 abort，然后调用 .abort()
• 上传成功或失败后，及时清除 controller 引用，防止内存泄漏

注意兼容性与降级处理

AbortController 在现代浏览器（Chrome 66+、Firefox 57+、Safari 12.1+、Edge 79+）中已广泛支持：

• 若需支持旧版 IE，必须改用 XMLHttpRequest + .abort()，但无法与 fetch 统一接口
• 可通过 typeof AbortController !== 'undefined' 检测支持性，按需选择方案
• 不建议强行 polyfill AbortController 用于上传取消——polyfill 只能模拟 Promise 拒绝，无法真实中断网络请求