lunanting/ai-chatbot
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

详情替换产品图预览改用dataURL
Some checks failed
Lint / build (20) (push) Has been cancelled
Details
Playwright Tests / test (push) Has been cancelled
Details

Browse Source
This commit is contained in:
Your Name 2026-02-05 19:57:28 +08:00
parent 627a9132c5
commit b6ed76758c
1 changed files with 4 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
components/scene-fusion-view.tsx
View File

@ -99,19 +99,11 @@ export function SceneFusionView({ onBack, initialProductImage, initialProductNam
// 文件上传 Input 引用 // 文件上传 Input 引用
const productInputRef = useRef<HTMLInputElement>(null); const productInputRef = useRef<HTMLInputElement>(null);
const sceneInputRef = useRef<HTMLInputElement>(null); const sceneInputRef = useRef<HTMLInputElement>(null);
const productPreviewObjectUrlRef = useRef<string | null>(null);
const productUploadIdRef = useRef(0); const productUploadIdRef = useRef(0);
// 如果外部传入了初始产品图，则在首次挂载或传入值变化时自动带入 // 如果外部传入了初始产品图，则在首次挂载或传入值变化时自动带入
const updateProductPreview = (previewUrl: string | null, isObjectUrl = false) => { const updateProductPreview = (previewUrl: string | null) => {
if (productPreviewObjectUrlRef.current) {
URL.revokeObjectURL(productPreviewObjectUrlRef.current);
productPreviewObjectUrlRef.current = null;
}
setProductImagePreview(previewUrl); setProductImagePreview(previewUrl);
if (isObjectUrl && previewUrl) {
productPreviewObjectUrlRef.current = previewUrl;
}
}; };
const clearProductImage = () => { const clearProductImage = () => {
@ -122,7 +114,7 @@ export function SceneFusionView({ onBack, initialProductImage, initialProductNam
}; };
const handleProductPreviewError = () => { const handleProductPreviewError = () => {
if (!productPreviewObjectUrlRef.current && productImage && productImagePreview !== productImage) { if (productImage && productImagePreview !== productImage) {
updateProductPreview(productImage); updateProductPreview(productImage);
} }
}; };
@ -134,15 +126,6 @@ export function SceneFusionView({ onBack, initialProductImage, initialProductNam
} }
}, [initialProductImage]); }, [initialProductImage]);
useEffect(() => {
return () => {
if (productPreviewObjectUrlRef.current) {
URL.revokeObjectURL(productPreviewObjectUrlRef.current);
productPreviewObjectUrlRef.current = null;
}
};
}, []);
// 处理产品图上传 // 处理产品图上传
const uploadProductImageFile = async (file: File): Promise<string> => { const uploadProductImageFile = async (file: File): Promise<string> => {
const formData = new FormData(); const formData = new FormData();
@ -182,8 +165,7 @@ export function SceneFusionView({ onBack, initialProductImage, initialProductNam
} }
setProductImage(null); setProductImage(null);
const previewUrl = URL.createObjectURL(file); updateProductPreview(null);
updateProductPreview(previewUrl, true);
setIsProductUploading(true); setIsProductUploading(true);
const uploadId = ++productUploadIdRef.current; const uploadId = ++productUploadIdRef.current;
@ -192,6 +174,7 @@ export function SceneFusionView({ onBack, initialProductImage, initialProductNam
if (uploadId !== productUploadIdRef.current) return; if (uploadId !== productUploadIdRef.current) return;
const result = e.target?.result; const result = e.target?.result;
if (typeof result === "string") { if (typeof result === "string") {
updateProductPreview(result);
setProductImage(result); setProductImage(result);
} else { } else {
toast.error("图片读取失败，请重试"); toast.error("图片读取失败，请重试");
@ -210,9 +193,6 @@ export function SceneFusionView({ onBack, initialProductImage, initialProductNam
const uploadedUrl = await uploadProductImageFile(file); const uploadedUrl = await uploadProductImageFile(file);
if (uploadId === productUploadIdRef.current) { if (uploadId === productUploadIdRef.current) {
setProductImage(uploadedUrl); setProductImage(uploadedUrl);
if (!productPreviewObjectUrlRef.current) {
updateProductPreview(uploadedUrl);
}
toast.success("产品图上传成功"); toast.success("产品图上传成功");
} }
} catch (error) { } catch (error) {