在 React 中处理文件上传时，若未阻止表单默认提交行为，移动设备上可能触发页面重载；本文详解如何通过 preventDefault() 正确拦截事件、避免意外刷新，并给出可直接复用的修复方案。
在 react 中处理文件上传时，若未阻止表单默认提交行为，移动设备上可能触发页面重载；本文详解如何通过 preventdefault() 正确拦截事件、避免意外刷新，并给出可直接复用的修复方案。
问题根源并非 Webpack 配置或 beforeunload 事件监听，而是缺失对原生表单提交行为的显式阻止。虽然你的代码中只渲染了 <input type="file">，但若这些 input 被包裹在 <form></form> 标签内（即使未显式写出），或父级元素监听了 submit 事件，浏览器在某些移动端环境（尤其是 iOS Safari 或 PWA 模式下）会将文件选择视为表单提交触发点，导致整页刷新——这正是“本地正常、上线异常”的典型表现：生产环境常启用 HTML5 History API 或 Service Worker，对表单行为更敏感。
✅ 正确解法是在事件处理函数中调用 event.preventDefault()。注意：onChange 本身不触发提交，但若用户在文件选择后按回车、或 input 被意外置于 form 内，仍可能冒泡触发 submit。因此推荐双重防护：
-
确保 input 不位于
<form></form>内（检查组件外层结构）； -
在
onFileUpload中添加preventDefault()（安全冗余）； -
移除无效的
beforeunload监听（它仅用于提示用户离开，无法阻止表单提交，且现代浏览器已限制其行为）。
修正后的代码如下：
import React, { useState } from 'react';
import { FlexContainer } from '@styles/FlexContainer';
const TestUpload = () => {
const [file, setFile] = useState<File | null>(null);
const onFileUpload = (event: React.ChangeEvent<HTMLInputElement>) => {
event.preventDefault(); // ✅ 关键：阻止默认行为（如表单提交）
if (!event.target.files || event.target.files.length === 0) return;
setFile(event.target.files[0]);
};
return (
<FlexContainer>
{/* 确保此处无 <form> 包裹 */}
<input
type="file"
onChange={onFileUpload}
accept="image/*"
capture="camera"
id="fileFromCamera"
/>
<input
type="file"
onChange={onFileUpload}
accept="image/*"
id="fileWithoutCamera"
/>
</FlexContainer>
);
};
export default TestUpload;⚠️ 注意事项：
-
event.stopPropagation()通常非必需——除非你明确需要阻止事件冒泡到父级onClick/onSubmit处理器； - 若必须使用
<form></form>（例如需支持拖拽上传或键盘提交），请为 form 添加onSubmit={(e) => e.preventDefault()}； - 移动端
capture="camera"在部分 Android 浏览器中可能触发页面跳转，建议结合useEffect检测navigator.userAgent做兼容性降级； - 生产环境刷新问题常与 Service Worker 缓存策略相关，可检查
workbox配置是否误拦截了POST请求，但本例中优先排查 DOM 结构和事件处理。
总结：React 文件上传防刷新的核心是语义化控制——明确阻止浏览器默认提交逻辑，而非依赖全局生命周期钩子。保持 input 独立、事件处理干净、防御性调用 preventDefault()，即可彻底解决该问题。
