Vue.js 中通过 $emit 实现文件上传进度条需子组件用 XMLHttpRequest 监听 upload.onprogress 并节流 emit 进度，父组件 @progress 接收更新 UI；同时处理 cancel、success、error 事件及组件卸载时 abort 防泄漏。

Vue.js 中通过 $emit 实现文件上传进度条的实时反馈，核心在于子组件（如上传控件）主动向父组件传递进度数据，父组件接收后更新 UI。关键不是单纯调用 emit，而是配合原生 XMLHttpRequest 或 fetch + AbortController 的上传事件监听，并确保每次进度变化都及时、节流地触发自定义事件。

子组件中监听 upload 事件并 emit 进度

在封装的上传组件内，使用 XMLHttpRequest 更便于监听上传阶段（upload.onprogress）。避免直接在模板中绑定 input change 后立即上传，应先创建请求实例，再手动配置事件监听：

• 创建 const xhr = new XMLHttpRequest()
• 监听 xhr.upload.onprogress = (e) => { if (e.lengthComputable) { const percent = Math.round((e.loaded / e.total) * 100); this.$emit('progress', percent); } }
• 注意：必须在 xhr.open() 之后、xhr.send() 之前绑定 upload.onprogress，否则无效
• 为防高频触发，可在 emit 前加简单节流（如 if (Date.now() - lastEmitTime > 100)）

父组件监听 progress 事件并驱动进度条

父组件通过 @progress 接收子组件 emit 的数值，绑定到响应式数据，再交给 或自定义进度条组件渲染：

cn-json-diff

比较两个 JSON 文件并显示差异。支持嵌套结构、数组及值变更。纯 Python 标准库实现，无需 API 密钥。

下载

• 定义响应式字段：data() { return { uploadPercent: 0 }; }
• 模板中绑定：
• 配合 CSS 控制视觉效果，例如设置 transition: width 0.2s ease 让进度变化更平滑
• 上传完成或失败时，建议 emit finish 或 error 事件，重置或锁定进度条状态

处理中断、取消与错误场景

仅反馈进度不够健壮，需同步管理上传生命周期：

• 子组件暴露 cancel 方法，内部调用 xhr.abort()，并 emit cancelled 事件
• 监听 xhr.onloadend 判断 xhr.status，成功 emit success，失败 emit error 并附带错误信息
• 父组件可据此控制按钮禁用状态（如上传中禁用“再次上传”按钮）、显示提示文案
• 避免内存泄漏：若组件卸载前上传未结束，应在 beforeUnmount 中 abort 请求

Vue 3 Composition API 写法适配

若使用 Vue 3，子组件用 defineEmits 显式声明事件，提升类型安全和 IDE 支持：

• const emit = defineEmits(['progress', 'success', 'error', 'cancelled'])
• emit 调用方式不变：emit('progress', percent)
• 父组件监听语法一致：@progress="handleProgress"，无需额外适配
• 推荐配合 ref 管理 xhr 实例，便于在 onBeforeUnmount 中清理

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