Vue 3 中 Axios 文件上传暂停实为取消请求+状态管理+断点恢复：用 AbortController 中止分片请求，localStorage 记录已传索引，继续时通过文件哈希校验服务端已存分片并仅上传缺失部分。

Vue 3 中用 Axios 实现带暂停功能的切片文件上传，核心不是“让 Axios 暂停”，而是通过取消请求 + 状态管理 + 断点恢复来模拟暂停行为。Axios 本身不支持暂停传输，但可以利用其 CancelToken 或更现代的 AbortController 主动中止正在进行的分片上传请求，再配合本地记录已上传分片的状态，下次继续时跳过已完成部分。

蓝湖代码转vue2.0+element-ui

将静态 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 的瞬时值累计，它在并发下不可靠

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！