114 lines
3.1 KiB
TypeScript
114 lines
3.1 KiB
TypeScript
'use client'
|
||
|
||
import { useState, useRef } from 'react'
|
||
import { Button } from '@/components/ui/button'
|
||
import { X, Image as ImageIcon } from 'lucide-react'
|
||
import Image from 'next/image'
|
||
import { Spinner } from '@/components/ui/spinner'
|
||
import { uploadToCos } from '@/lib/cos-client'
|
||
|
||
interface ImageUploaderProps {
|
||
value: string
|
||
onChange: (url: string) => void
|
||
}
|
||
|
||
export function ImageUploader({ value, onChange }: ImageUploaderProps) {
|
||
const [isUploading, setIsUploading] = useState(false)
|
||
const [error, setError] = useState('')
|
||
const fileInputRef = useRef<HTMLInputElement>(null)
|
||
|
||
const handleFileSelect = async (e: React.ChangeEvent<HTMLInputElement>) => {
|
||
const file = e.target.files?.[0]
|
||
if (!file) return
|
||
|
||
// Validate file type
|
||
if (!file.type.startsWith('image/')) {
|
||
setError('请选择图片文件')
|
||
return
|
||
}
|
||
|
||
// Validate file size (max 5MB)
|
||
if (file.size > 5 * 1024 * 1024) {
|
||
setError('图片大小不能超过 5MB')
|
||
return
|
||
}
|
||
|
||
setError('')
|
||
setIsUploading(true)
|
||
|
||
try {
|
||
const uploadUrl = await uploadToCos(file, file.name)
|
||
onChange(uploadUrl)
|
||
} catch (err) {
|
||
console.error('Upload error:', err)
|
||
setError(err instanceof Error ? err.message : '上传失败')
|
||
} finally {
|
||
setIsUploading(false)
|
||
// Reset file input
|
||
if (fileInputRef.current) {
|
||
fileInputRef.current.value = ''
|
||
}
|
||
}
|
||
}
|
||
|
||
const handleRemove = () => {
|
||
onChange('')
|
||
setError('')
|
||
}
|
||
|
||
return (
|
||
<div className="space-y-2">
|
||
{value ? (
|
||
<div className="relative w-full h-40 rounded-lg border overflow-hidden bg-gray-50">
|
||
<Image
|
||
src={value}
|
||
alt="预览图片"
|
||
fill
|
||
className="object-contain"
|
||
sizes="(max-width: 500px) 100vw, 500px"
|
||
/>
|
||
<Button
|
||
type="button"
|
||
variant="destructive"
|
||
size="icon"
|
||
className="absolute top-2 right-2 h-8 w-8"
|
||
onClick={handleRemove}
|
||
>
|
||
<X className="h-4 w-4" />
|
||
</Button>
|
||
</div>
|
||
) : (
|
||
<div
|
||
className="w-full h-40 border-2 border-dashed rounded-lg flex flex-col items-center justify-center cursor-pointer hover:border-primary hover:bg-gray-50 transition-colors"
|
||
onClick={() => fileInputRef.current?.click()}
|
||
>
|
||
{isUploading ? (
|
||
<>
|
||
<Spinner size="lg" />
|
||
<p className="mt-2 text-sm text-gray-500">上传中...</p>
|
||
</>
|
||
) : (
|
||
<>
|
||
<ImageIcon className="h-10 w-10 text-gray-400" />
|
||
<p className="mt-2 text-sm text-gray-500">点击上传图片</p>
|
||
<p className="text-xs text-gray-400">支持 JPG、PNG，最大 5MB</p>
|
||
</>
|
||
)}
|
||
</div>
|
||
)}
|
||
|
||
{error && (
|
||
<p className="text-sm text-red-600">{error}</p>
|
||
)}
|
||
|
||
<input
|
||
ref={fileInputRef}
|
||
type="file"
|
||
accept="image/*"
|
||
className="hidden"
|
||
onChange={handleFileSelect}
|
||
/>
|
||
</div>
|
||
)
|
||
}
|