Vue 3 中 Axios 文件上传暂停实为取消请求+状态管理+断点恢复：用 AbortController 中止分片请求，localStorage 记录已传索引，继续时通过文件哈希校验服务端已存分片并仅上传缺失部分。
Vue 3 中用 Axios 实现带暂停功能的切片文件上传，核心不是“让 Axios 暂停”，而是通过取消请求 + 状态管理 + 断点恢复来模拟暂停行为。Axios 本身不支持暂停传输，但可以利用其 CancelToken 或更现代的 AbortController 主动中止正在进行的分片上传请求，再配合本地记录已上传分片的状态，下次继续时跳过已完成部分。
将静态 Vue 页面(index.vue)改造为动态页面(Custom.vue)；稿源仅限 index.vue、其引用的 CSS 与资源路径，禁止参考仓库内其他文件。Invoke when user wants to transform a static Vue page into a dynamic data-driven page with Element UI components.
暂停的本质是“取消当前请求 + 保存进度”
用户点击暂停时，前端不做等待或阻塞，而是立即：
- 调用 controller.abort() 终止所有正在上传的分片请求
- 将当前已成功上传的分片索引（如 [0,1,2,5]）存入 localStorage 或 reactive 状态
- 把上传状态设为 paused，UI 切换按钮文字和图标
继续上传要先校验已传分片
点击继续后，不能直接重发全部分片，必须走断点续传逻辑：
- 用文件哈希（如 SparkMD5）向服务端发起预检请求，例如：/api/upload/check?fileHash=xxx
- 后端返回已存在的分片索引列表（如 [0,1,2,5]）
- 前端对比本地记录与服务端返回，只对缺失的分片（如 [3,4,6,...]）发起新上传请求
- 并发控制保持一致（比如最多同时传 4 片），避免压垮浏览器或服务端
关键代码结构要点
使用 AbortController 管理请求生命周期：
- 每个分片上传单独 new 一个 controller，方便精准中止某一片
- 全局 controller 用于一键中止所有分片（暂停全部）
- 上传函数需接收 controller.signal，并传给 axios 的 signal 配置项
- 失败回调里判断 error.name === 'AbortError'，避免把暂停当成错误上报
状态与 UI 同步不能靠猜测
暂停/继续过程中，进度条、剩余时间、已传大小等必须严格依赖真实数据：
- 总大小 = 文件原始 size
- 已传大小 = 所有已完成分片的 size 之和（不是按比例估算）
- 进度值 = Math.round((uploadedSize / totalSize) * 100)
- 不要用 onUploadProgress 的瞬时值累计，它在并发下不可靠
