文件上传状态适合用全局状态管理，核心是设计扁平可预测的状态结构（如以uploadId为key的对象映射）并显式同步上传各阶段状态，配合按需渲染的进度条与自动清理机制。
文件上传状态适合用全局状态管理，核心是把进度、错误、完成等信息统一存到状态库（如 Pinia、Redux 或 Context），让所有组件能响应式读取和更新。关键不在“存哪里”，而在“怎么设计状态结构”和“如何与上传逻辑解耦”。
状态结构要扁平可预测
避免嵌套过深或动态 key。推荐用对象映射方式，以文件唯一标识（如 file.id 或自定义 uploadId）为 key：
- uploadStatus: { [uploadId]: { progress: number, status: 'idle' | 'uploading' | 'success' | 'error', message?: string } }
- 每个上传任务独立跟踪，支持多文件并发不干扰
- status 字段明确区分生命周期阶段，便于 UI 条件渲染（比如只在 uploading 时显示进度条）
上传过程需主动触发并同步状态
不要依赖第三方库自动上报进度（如 axios 的 onUploadProgress 只在请求层生效）。应在业务逻辑中显式调用状态更新函数：
- 开始上传前：dispatch({ uploadId, status: 'uploading', progress: 0 })
- 监听原生 XMLHttpRequest 或 fetch + ReadableStream 进度事件，每 5% 更新一次 progress（防抖处理，避免频繁重绘）
- 成功后：dispatch({ uploadId, status: 'success', progress: 100 })；失败则设为 'error' 并附带 message
全局进度条组件按需订阅
进度条不一定要“一直显示”。更合理的做法是：
- 用 computed 或 selector 筛选当前正在上传的项：activeUploads = Object.values(uploadStatus).filter(i => i.status === 'uploading')
- 若存在 activeUploads，取平均进度或显示“多个文件上传中”，点击可展开详情列表
- 单个上传时直接绑定 progress 值；多个上传时建议用 indeterminate 模式或聚合进度（如已完成数 / 总数）
清理机制不能少
上传完成后状态长期滞留会污染 store。应设置自动清理策略：
- success 状态保留 3 秒，之后自动 remove 对应 uploadId
- error 状态保留至用户手动关闭或重试，提供 clearError(uploadId) 方法
- 页面卸载前（beforeUnmount / useEffect cleanup）检查未完成上传，标记为 canceled 并清理临时资源
不复杂但容易忽略。重点是状态粒度合适、更新时机可控、UI 层只消费不决策。
