fix(qrcode): 修复切换 tab 后二维码图片失效问题

- 移除 ImageUploader 组件卸载时的预览 URL 释放逻辑
- 在 useQrCode hook 中统一管理预览 URL 生命周期
- 创建新预览 URL 前释放旧的,避免内存泄漏
This commit is contained in:
雨霖铃
2026-05-21 00:12:06 +08:00
parent 99a0400db3
commit 70580a9a63
2 changed files with 13 additions and 16 deletions
-9
View File
@@ -36,15 +36,6 @@ const ImageUploader = ({
const { showMessage } = useSnackbar(); const { showMessage } = useSnackbar();
const fileInputRef = useRef<HTMLInputElement>(null); const fileInputRef = useRef<HTMLInputElement>(null);
// 清理预览 URL,防止内存泄漏
useEffect(() => {
return () => {
if (previewUrl) {
URL.revokeObjectURL(previewUrl);
}
};
}, [previewUrl]);
const handleFileChange = useCallback( const handleFileChange = useCallback(
(file: File) => { (file: File) => {
onFileChange(file); onFileChange(file);
+8 -2
View File
@@ -162,13 +162,19 @@ export function useQrCode(): QrCodeContextValue {
// 处理文件选择 // 处理文件选择
const handleFileChange = useCallback( const handleFileChange = useCallback(
(file: File) => { (file: File) => {
setParserState((prev) => ({ setParserState((prev) => {
// 释放旧的预览 URL
if (prev.previewUrl) {
URL.revokeObjectURL(prev.previewUrl);
}
return {
...prev, ...prev,
selectedFile: file, selectedFile: file,
previewUrl: URL.createObjectURL(file), previewUrl: URL.createObjectURL(file),
decodedResult: '', decodedResult: '',
parseError: '', parseError: '',
})); };
});
// 自动解析 // 自动解析
parseQrCode(file); parseQrCode(file);
}, },