在移动端 React 应用中，文件上传触发页面重载通常是因为 被包裹在隐式表单中或点击行为被浏览器默认提交逻辑捕获；正确阻止事件冒泡与默认行为即可解决。
在移动端 react 应用中，文件上传触发页面重载通常是因为 `` 被包裹在隐式表单中或点击行为被浏览器默认提交逻辑捕获；正确阻止事件冒泡与默认行为即可解决。
该问题本质并非 Webpack 配置或部署环境差异导致，而是浏览器对 <input type="file"> 的点击行为在特定上下文（尤其是移动端 WebView 或某些 PWA 封装环境）下可能意外触发表单提交或页面导航。虽然你的代码中未显式使用 <form></form> 标签，但部分移动浏览器（如 iOS Safari 某些版本、微信内置浏览器、PWA 安装后 WebView）会将孤立的文件输入控件与最近的可提交上下文关联，或因 capture="camera" 触发特殊权限流程时伴随页面生命周期异常。
✅ 正确解法是在事件处理函数中显式调用 event.preventDefault() 和 event.stopPropagation()：
const onFileUpload = (event: React.ChangeEvent<htmlinputelement>) => {
event.preventDefault(); // 阻止浏览器默认行为（如表单提交、页面跳转）
event.stopPropagation(); // 阻止事件冒泡至父级（避免被外层监听器误处理）
if (!event.target.files || event.target.files.length === 0) return;
setFile(event.target.files[0]);
};</htmlinputelement>
⚠️ 注意事项：
-
preventDefault()必须在事件处理早期调用（在setFile前），否则可能无效； - 若组件被嵌套在
<form></form>中（即使未显式写出，某些 UI 框架或布局组件可能暗含<form></form>），务必为<form></form>添加onSubmit={e => e.preventDefault()}； -
capture="camera"在部分安卓 WebView 中存在兼容性问题，若非必需，建议移除以排除干扰；如需相机直传，推荐使用navigator.mediaDevices.getUserMedia+ Canvas 手动捕获，更可控； - 不要依赖
beforeunload监听来“挽救”已发生的重载——它仅用于提示用户保存数据，无法阻止由表单提交引发的同步跳转。
? 额外加固（推荐）：为 input 添加 type="button" 的包装按钮，完全解耦原生 file input 的交互风险：
<input type="file" id="fileFromCamera" accept="image/*" capture="camera" onchange="{onFileUpload}" style="{{" display:><label htmlfor="fileFromCamera">
<button type="button">? 拍照上传</button>
</label>
这样既保持语义化，又确保点击行为完全由开发者控制，彻底规避隐式提交风险。最终效果：文件选择后状态正常更新，页面零闪退、不重载、不 remount。
