Vue文件上传组件通过emit事件驱动实现进度与结果回传，子组件监听XHR进度并节流emit on-progress，上传完成时emit on-success/on-error/on-cancel，父组件监听事件更新状态并配合props控制行为。
Vue 中文件上传组件通过 emit 向父组件回传进度与结果，核心在于子组件主动触发自定义事件，并携带实时数据；父组件监听对应事件并更新状态。这不是单纯的数据绑定，而是“事件驱动 + 状态同步”的组合实践。
上传过程中用 emit 实时回传进度
在子组件内部（如封装的 Upload.vue），使用原生 XMLHttpRequest 或 axios 时，需监听 upload.onprogress，计算百分比后通过 emit 发出：
- 定义 emit 事件名，例如
update:progress或更语义化的on-progress - 在
xhr.upload.onprogress回调中判断e.lengthComputable，避免 NaN - 计算
Math.round((e.loaded / e.total) * 100)，再emit('on-progress', { percent: value, loaded: e.loaded, total: e.total }) - 注意：不要在每次进度变化都高频 emit（可加节流或只发整数百分比）
上传完成/失败时 emit 最终结果
上传结束不是靠定时轮询，而是依赖请求的自然回调（onload、onerror、onabort）：
Ainative Vue Sdk
下载
使用 `@ainative/vue-sdk` 为 Vue 3 应用添加 AI 聊天功能。适用于以下场景：(1) 安装 `@ainative/vue-sdk`，(2) 在 Vue 组件中使用 `useChat` 组合式函数，(3) 提供……
- 成功时 emit
on-success，携带后端返回的响应数据（如文件 ID、URL、原始文件名） - 失败时 emit
on-error，附带错误信息（err.message或后端 code/msg） - 取消上传时 emit
on-cancel，便于父组件清理 UI 状态（如隐藏进度条、还原按钮文字） - 建议统一用对象结构传递，例如
{ status: 'success', data: res, file: currentFile }
父组件正确监听并响应 emit 事件
父组件不能只写 @on-success="handleSuccess" 就完事，还需配合状态管理逻辑：
立即学习“前端免费学习笔记（深入）”；
- 在模板中绑定多个事件：
@on-progress="updateProgress" @on-success="handleUploadSuccess" @on-error="handleUploadError" -
updateProgress方法中直接更新本地 ref（如progressPercent），驱动进度条渲染 - 成功回调里应重置上传状态（
isUploading = false）、清空 input 的value（避免重复选同一文件）、并可能触发后续操作（如提交表单） - 错误处理要区分网络异常、后端校验失败、权限拒绝等类型，给出不同提示
配合 Props 控制上传行为更健壮
仅靠 emit 不够，父组件还需通过 props 向子组件传递必要控制参数：
-
:url—— 上传目标接口地址（动态传入，避免写死） -
:headers—— 认证 token 或业务 header -
:max-size和:accept—— 前置校验，减少无效 emit -
:auto-upload—— 控制是否选完即传，还是由父组件统一触发 - 这些 props 让子组件更通用，emit 则专注反馈执行过程，职责清晰
