组合式函数 useUpload 完美封装文件上传状态管理，支持单次/多文件上传、校验、转换及 Pinia 协同队列，兼顾取消请求与内存清理。

文件上传交互的状态管理（比如 loading、错误、进度、成功结果）完全适合用组合式函数封装。核心思路是：把状态变量 + 上传逻辑 + 副作用控制（如请求取消、事件监听）收进一个函数，返回响应式数据和操作方法，组件只负责调用和展示。

用 useUpload 封装基础上传状态

定义一个 useUpload 组合式函数，专注处理单次上传的生命周期：

• 用 ref 管理 loading、error、progress、url 等状态
• 接收上传配置（如 action、headers、onSuccess 回调）作为参数
• 内部调用 axios 或 fetch，绑定 onUploadProgress 获取进度
• 暴露 upload(file) 和 cancel() 方法，支持中止请求

这样，每个需要上传的组件只需调用 const { upload, loading, progress, url } = useUpload({ action: '/api/upload' })，无需重复写状态逻辑。

支持多文件与文件校验的扩展方式

若需处理多个文件或前置校验，可在组合式函数中增加能力：

• 用 reactive 管理 fileList，包含每项的 name、status（'ready' | 'uploading' | 'success' | 'error'）、url
• 在 upload 方法里先执行 beforeUpload 校验（如类型、大小），不通过直接返回 false
• 支持传入 transformFile 函数，例如压缩图片或添加水印后再上传

这种设计让校验和转换逻辑可插拔，不影响主流程，也便于单元测试。

Springboot Vue Builder

从零开始编排 SpringBoot+Vue 全栈项目工作流，适用于新建全栈项目或完整脚手架请求，触发后依次调用 product‑spec‑builder（需求调研）等模块。

下载

与 Pinia 协同管理全局上传队列

当上传任务变多（如批量上传、后台持续上传），建议把队列状态交给 Pinia store 管理：

• Pinia store 中定义 uploads: UploadItem[] 和 addUpload()、removeUpload() 等动作
• 组合式函数 useUpload 内部调用 store.addUpload() 注册任务，并监听其状态变化
• 组件通过 store.uploads 渲染上传列表，而不用自己维护数组

状态归 store，逻辑归 composable，职责清晰，跨组件同步也自然成立。

注意取消请求与内存清理

上传是典型的异步副作用，容易引发内存泄漏或状态错乱：

• 使用 Axios 时，务必在 upload() 中生成 CancelToken 或 AbortController，并在 onUnmounted 时调用 cancel()
• 避免在 onSuccess 回调中直接修改父组件传入的 ref，应通过 emit 或 store 更新，保证响应式链路可控
• 大文件上传中，不要把整个 File 对象长期保留在 ref 里，上传完成后及时置空或释放引用

这些细节不处理，小项目可能没事，但一上生产环境就容易出未捕获错误或卡顿。

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