diff --git a/components/chat.tsx b/components/chat.tsx index 67c8186..9bea097 100644 --- a/components/chat.tsx +++ b/components/chat.tsx @@ -583,21 +583,62 @@ export function Chat({ }; // 处理画图标注完成 - const handleDrawingComplete = (annotatedImageUrl: string) => { - // annotatedImageUrl 是 base64 data URL 格式 + const handleDrawingComplete = async (annotatedImageUrl: string) => { + // annotatedImageUrl 是 base64 data URL 格式,需要先上传到服务器获取 URL const fileName = `annotated-${Date.now()}.png`; - setAttachments((prev) => [ - ...prev, - { - url: annotatedImageUrl, - name: fileName, - contentType: "image/png", - }, - ]); + try { + // 如果是 base64 格式,先上传到服务器 + if (annotatedImageUrl.startsWith("data:")) { + toast.info("正在上传标注图片..."); + + // 将 base64 转换为 Blob + const response = await fetch(annotatedImageUrl); + const blob = await response.blob(); + + // 创建 FormData 上传 + const formData = new FormData(); + formData.append("file", blob, fileName); + + const uploadResponse = await fetch("/api/files/upload", { + method: "POST", + body: formData, + }); + + if (!uploadResponse.ok) { + throw new Error("上传失败"); + } + + const uploadResult = await uploadResponse.json(); + + setAttachments((prev) => [ + ...prev, + { + url: uploadResult.url, + name: fileName, + contentType: "image/png", + }, + ]); + + toast.success("标注图片已添加"); + } else { + // 如果已经是 URL,直接使用 + setAttachments((prev) => [ + ...prev, + { + url: annotatedImageUrl, + name: fileName, + contentType: "image/png", + }, + ]); + } - // 如果输入框为空,自动填入提示词 - setInput((prev) => prev ? prev : "请根据我的标注修改这张图片:"); + // 如果输入框为空,自动填入提示词 + setInput((prev) => prev ? prev : "请根据我的标注修改这张图片:"); + } catch (error) { + console.error("上传标注图片失败:", error); + toast.error("上传标注图片失败,请重试"); + } }; // 处理图片变清晰