关键在于避免重复触发、处理失败及确保提示不阻塞操作：需拦截表单submit事件并preventdefault，fetch后检查response.ok或status，解析json再更新dom，上传时禁用按钮并显示loading，提示后自动隐藏且清除旧定时器。
直接用 fetch 或 XMLHttpRequest 上传文件后，在响应成功时动态显示提示元素即可，关键不是“怎么弹窗”，而是“怎么避免重复触发、怎么处理失败、怎么让提示不卡住后续操作”。
监听 submit 事件并阻止默认行为
表单带 type="file" 时，如果直接用 <form method="POST" enctype="multipart/form-data"></form> 提交，页面会刷新，无法做前端提示。必须拦截原生提交。
- 给
<form></form>绑定submit事件，第一行就写event.preventDefault() - 确保表单里没有多余的
action或写死的跳转逻辑，否则容易漏掉拦截 - 如果用了
button type="submit"但表单没绑定事件，提示永远不会出现——这是最常被忽略的断点
用 fetch 上传并判断响应状态
fetch 返回的 Response 对象必须显式调用 .ok 或检查 status，不能只靠 then() 走通就认为成功。
-
if (!response.ok) throw new Error(`HTTP ${response.status}`)必须写，否则 400/500 响应也会进 success 分支 - 服务端返回的 JSON 中建议包含明确字段如
{ "success": true, "message": "上传完成" }，前端据此更新提示文案，而不是硬编码 - 不要在
fetch().then()里直接操作 DOM；先等await response.json()解析完再显示提示，否则可能提示闪一下就消失
显示提示后自动隐藏与防重复点击
用户上传完点一次“上传”，结果手快连点两下，后端收到两个请求，前端却只显示一个提示——这很常见，得从交互层堵住。
- 点击上传按钮后立即将其
disabled = true，上传完成或失败后再恢复 - 提示框显示后，用
setTimeout在 3 秒后设display = "none"，但要先清空之前的定时器，避免多次点击导致多个定时器叠加 - 如果服务端响应慢，用户可能误以为失败又点一次，所以禁用按钮 + 显示 loading 状态（比如按钮文字变成“上传中…”）比单纯提示更重要
真正难的不是“怎么显示一句话”，而是上传过程中网络中断、服务端校验失败、文件超限被拒、甚至用户点了取消按钮——这些场景下提示文案是否准确、按钮是否可恢复、错误信息是否透出，才是影响体验的关键。别只盯着 display: block 那一行代码。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
