根本原因是未真正阻止表单默认提交行为；常见于绑定时机过早、button类型缺失、监听click而非submit、伪空action失效等场景，必须用formdata+fetch手动提交并完善错误处理。
移动端文件上传时页面意外刷新，根本原因不是设备特性，而是表单默认提交行为在触屏环境里照样生效——submit 事件触发后，若未拦截，浏览器仍会导航或重载。关键不在“移动端”，而在“是否真正阻止了 form 的 submit 默认行为”。
为什么 e.preventDefault() 在手机上好像没用
常见错觉：PC 上好使，手机点一下就刷新。其实不是兼容性问题，而是以下任一情况导致 preventDefault 未执行：
-
addEventListener('submit', ...)绑定时机太早，form元素尚未渲染（尤其 SPA 动态插入表单时） - 按钮是
<button></button>且没写type="button"，放在<form></form>内，点击即触发隐式 submit（iOS Safari 尤其敏感） - 监听的是
click而非submit事件 ——e.preventDefault()对 click 本身无刷新行为可阻止 - 表单用了
action="javascript:void(0)"等“伪空 action”，但部分安卓 WebView 仍会尝试导航
移动端必须用 FormData + fetch 提交文件
原生表单提交（enctype="multipart/form-data"）无法避免跳转，除非你同时做两件事：阻止 submit + 手动发请求。而 FormData 是唯一能正确序列化 <input type="file"> 的方式。
注意这些细节：
- 不要用
JSON.stringify()包FormData—— 它不是普通对象，fetch会自动设置正确的Content-Type: multipart/form-data; boundary=... - 服务端必须能接收
multipart/form-data，不能只认application/json - 若需带 token 或额外字段，直接
formData.append('token', 'xxx')，别拼到 URL - iOS 15+ 上传大文件时可能因内存限制中断，建议加
timeout和错误重试逻辑
input[type="file"] 在 iOS/Android 上的坑
移动端 file input 行为不一致，容易引发“点了没反应”或“选完自动提交”：
- iOS Safari 不支持
multiple属性与摄像头同时使用，capture="camera"时务必去掉multiple - 某些安卓厂商浏览器（如华为、小米）会把 file input 点击映射成“表单 submit”，哪怕没写
type="submit"—— 解决方案：给它套一层<label></label>，并确保<input>不在<form></form>内部，或显式form="dummy-id"指向一个不存在的 form - 上传前检查
input.files.length === 0，避免空提交触发默认行为 - 不要依赖
change事件立即读取files—— 部分 Android 微信 WebView 中该事件可能延迟或丢失，改用input事件 +setTimeout延迟读取更稳
最后检查：页面没刷新，但数据没发出去？
这是最隐蔽的问题：你确实阻止了刷新，但 fetch 请求失败了，用户没感知，误以为“没提交”。务必处理这些分支：
-
fetch抛异常（网络断开、CORS）时，catch块里要给用户明确反馈，比如 toast 提示“上传失败，请重试” - 响应状态码非 2xx（如 400、413、422），需解析
response.json()并展示具体错误字段，不能只看ok字段 - 后端返回 HTML（比如 PHP 直出错误页）而不是 JSON，前端
response.json()会直接 throw SyntaxError —— 此时应先response.text()判断内容类型 - 上传进度条卡住？iOS Safari 不支持
XMLHttpRequest.upload.onprogress，fetch本身也不提供上传进度，只能靠服务端轮询或 WebSocket 回推
真正的难点不在“怎么阻止刷新”，而在于“阻止之后，如何让整个上传流程在各种低端安卓机、微信 WebView、iOS 版本碎片中都稳定可感知”。每次改 upload 逻辑，最好真机连 Chrome DevTools 远程调试，别只信模拟器。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
