fix: ImageAnnotator确认时先上传图片到服务器,避免传递base64

This commit is contained in:
Your Name 2026-02-03 10:57:30 +08:00
parent 00f2e32631
commit 7fdaa5d9b5

View File

@ -1227,8 +1227,36 @@ export function ImageAnnotator({ imageUrl, onConfirm, onCancel, initialResizeMod
}
};
// 上传图片到服务器获取URL的辅助函数
const uploadImageToServer = async (dataUrl: string, filename: string): Promise<string> => {
try {
// 将 data URL 转换为 Blob
const response = await fetch(dataUrl);
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();
return uploadResult.url;
} catch (error) {
console.error("上传图片失败:", error);
throw error;
}
};
// 确认
const handleConfirm = () => {
const handleConfirm = async () => {
// 优先使用处理后的图片(如果有)
if (processedImageUrl) {
// 如果有处理后的图片URL,直接使用它
@ -1237,10 +1265,19 @@ export function ImageAnnotator({ imageUrl, onConfirm, onCancel, initialResizeMod
}
if (processedImageBase64) {
// 如果有处理后的图片Base64,转换为data URL
// 如果有处理后的图片Base64,先上传到服务器获取URL
const mimeType = processType === "rmbg" || processType === "resize" ? "image/png" : "image/jpeg";
const dataUrl = `data:${mimeType};base64,${processedImageBase64}`;
onConfirm(dataUrl);
const ext = processType === "rmbg" || processType === "resize" ? "png" : "jpg";
const filename = `processed-${Date.now()}.${ext}`;
try {
toast.info("正在上传图片...");
const uploadedUrl = await uploadImageToServer(dataUrl, filename);
onConfirm(uploadedUrl);
} catch {
toast.error("上传失败,请重试");
}
return;
}
@ -1263,9 +1300,17 @@ export function ImageAnnotator({ imageUrl, onConfirm, onCancel, initialResizeMod
drawAction(exportCtx, action, 1);
}
// 导出为 data URL
// 导出为 data URL,然后上传到服务器
const dataUrl = exportCanvas.toDataURL("image/png");
onConfirm(dataUrl);
const filename = `annotated-${Date.now()}.png`;
try {
toast.info("正在上传图片...");
const uploadedUrl = await uploadImageToServer(dataUrl, filename);
onConfirm(uploadedUrl);
} catch {
toast.error("上传失败,请重试");
}
};
// 弹窗内容