组合式函数 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' })，无需重复写状态逻辑。
支持多文件与文件校验的扩展方式
若需处理多个文件或前置校验，可在组合式函数中增加能力：
立即学习“前端免费学习笔记（深入）”；
Springboot Vue Builder
下载
从零开始编排 SpringBoot+Vue 全栈项目工作流，适用于新建全栈项目或完整脚手架请求，触发后依次调用 product‑spec‑builder（需求调研）等模块。
- 用
reactive管理fileList，包含每项的name、status（'ready' | 'uploading' | 'success' | 'error'）、url - 在
upload方法里先执行beforeUpload校验（如类型、大小），不通过直接返回false - 支持传入
transformFile函数，例如压缩图片或添加水印后再上传
这种设计让校验和转换逻辑可插拔，不影响主流程，也便于单元测试。
与 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 里，上传完成后及时置空或释放引用
这些细节不处理，小项目可能没事，但一上生产环境就容易出未捕获错误或卡顿。
