0.0.8.5

components/ui/image-upload.tsx

@@ -12,8 +12,8 @@ import "react-image-crop/dist/ReactCrop.css"
 import imageCompression from "browser-image-compression"
 
 interface ImageUploadProps {
-  value?: string // The image ID
-  onChange: (imageId: string | undefined) => void
+  value?: string // The image URL
+  onChange: (imageUrl: string | undefined) => void
   className?: string
 }
 
@@ -27,31 +27,12 @@ export function ImageUpload({ value, onChange, className }: ImageUploadProps) {
   const imgRef = useRef<HTMLImageElement>(null)
   const fileInputRef = useRef<HTMLInputElement>(null)
 
-  // Load preview if value (imageId) exists
+  // Load preview if value (URL) exists
   useEffect(() => {
-    let objectUrl: string | undefined
-
-    const loadPreview = async () => {
-      if (!value) {
-        setPreviewUrl(undefined)
-        return
-      }
-
-      try {
-        const image = await db.images.get(value)
-        if (image) {
-          objectUrl = URL.createObjectURL(image.blob)
-          setPreviewUrl(objectUrl)
-        }
-      } catch (error) {
-        console.error("Failed to load image:", error)
-      }
-    }
-
-    loadPreview()
-
-    return () => {
-      if (objectUrl) URL.revokeObjectURL(objectUrl)
+    if (value) {
+      setPreviewUrl(value)
+    } else {
+      setPreviewUrl(undefined)
     }
   }, [value])
 
@@ -147,20 +128,27 @@ export function ImageUpload({ value, onChange, className }: ImageUploadProps) {
         imageBlob = await response.blob()
       }
 
-      const imageId = uuidv4()
-      await db.images.add({
-        id: imageId,
-        blob: imageBlob,
-        mimeType: imageBlob.type,
-        createdAt: new Date().toISOString(),
+      // 上传到服务器
+      const formData = new FormData()
+      formData.append('file', imageBlob, 'avatar.jpg')
+      
+      const response = await fetch('/api/upload', {
+        method: 'POST',
+        body: formData,
       })
 
-      onChange(imageId)
+      if (!response.ok) {
+        const error = await response.json()
+        throw new Error(error.error || '上传失败')
+      }
+
+      const { url } = await response.json()
+      onChange(url)
       setShowCropDialog(false)
       setImageToCrop(null)
     } catch (error) {
       console.error("Failed to save image:", error)
-      alert("图片保存失败")
+      alert("图片保存失败: " + (error instanceof Error ? error.message : '未知错误'))
     } finally {
       setIsLoading(false)
     }