取消文件上传需主动中断网络传输、清理内存并重置状态，使用 AbortController 调用 abort() 终止 fetch 请求，Axios 推荐 signal 方式，分片上传需清空待传队列并通知服务端清理临时分片，同时释放 DOM 引用和定时器。
取消正在进行中的文件上传请求，关键不是“停止界面按钮”，而是真正中断网络传输、清理内存引用、并让状态可恢复。单纯设个 isUploading = false 不起作用——请求还在后台跑，带宽和服务器资源仍在消耗。
用 AbortController 主动中止 Fetch 请求
现代浏览器原生支持 AbortController，它是取消 fetch 最标准、最可靠的方式：
- 在发起上传前创建控制器：
const controller = new AbortController() - 把
controller.signal传给 fetch 配置项：fetch(url, { method: 'POST', body: formData, signal }) - 点击“取消”时调用
controller.abort()，此时 fetch 会立即 reject 并抛出AbortError - 注意：每个请求需独立控制器，不能复用同一个
controller
Axios 中通过 CancelToken 或 AbortController 取消
Axios 从 v0.22+ 开始推荐使用 AbortController（兼容性更好），旧版可用 CancelToken：
Springboot Vue Builder
下载
从零开始编排 SpringBoot+Vue 全栈项目工作流，适用于新建全栈项目或完整脚手架请求，触发后依次调用 product‑spec‑builder（需求调研）等模块。
- 新版写法（推荐）：
axios.post(url, formData, { signal: controller.signal }) - 旧版写法（已弃用但仍有项目在用）：
axios.post(url, formData, { cancelToken: source.token })，配合source.cancel('用户取消') - 无论哪种，都要在 catch 中判断错误类型，避免把取消误报为失败：
if (axios.isCancel(error)) { /* 忽略 */ } else { /* 真实错误 */ }
暂停 ≠ 取消：分片上传中要区分逻辑
如果实现的是分片上传（支持暂停/续传），取消操作应比暂停更彻底：
- 暂停：只设
isPaused = true，保留已上传分片、待传队列和控制器实例 - 取消：调用当前分片的
controller.abort()，清空pendingChunks，重置uploadStatus为'idle'，并通知服务端清理临时分片（如有接口） - 不清理 pendingChunks 或未 abort 当前请求，用户点“继续”可能重复发同一块，造成服务端校验失败
清理 DOM 引用与内存泄漏风险
取消后若不做清理，容易引发内存泄漏或状态错乱：
- 手动创建的
URL.createObjectURL(blob)要配对调用URL.revokeObjectURL() - 动态插入的
标签（用于自动下载）要在取消后移除：link.remove() - 定时器（如轮询上传进度）需用
clearInterval清除 - 避免在组件卸载后还尝试更新响应式状态，可用
onBeforeUnmount做兜底取消
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
