155 lines
4.7 KiB
TypeScript
155 lines
4.7 KiB
TypeScript
"use client"
|
||
|
||
import React, { useState } from 'react'
|
||
import { FileUpload } from './file-upload'
|
||
import { Button } from './button'
|
||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from './card'
|
||
import type { UploadResponse } from '@/lib/api/upload'
|
||
|
||
// 使用示例组件
|
||
export function UploadExample() {
|
||
const [uploadedImages, setUploadedImages] = useState<UploadResponse[]>([])
|
||
const [uploadedFiles, setUploadedFiles] = useState<UploadResponse[]>([])
|
||
|
||
return (
|
||
<div className="space-y-6 p-6">
|
||
{/* 图片上传示例 */}
|
||
<Card>
|
||
<CardHeader>
|
||
<CardTitle>图片上传</CardTitle>
|
||
<CardDescription>上传图片文件，支持拖拽</CardDescription>
|
||
</CardHeader>
|
||
<CardContent>
|
||
<FileUpload
|
||
imageOnly={true}
|
||
multiple={true}
|
||
maxFiles={5}
|
||
maxSize={5 * 1024 * 1024} // 5MB
|
||
placeholder="拖拽图片到这里或点击上传"
|
||
onUploadSuccess={(files) => {
|
||
setUploadedImages(prev => [...prev, ...files])
|
||
console.log('上传成功:', files)
|
||
}}
|
||
onUploadError={(error) => {
|
||
console.error('上传失败:', error)
|
||
}}
|
||
onRemove={(file) => {
|
||
console.log('移除文件:', file)
|
||
}}
|
||
/>
|
||
</CardContent>
|
||
</Card>
|
||
|
||
{/* 通用文件上传示例 */}
|
||
<Card>
|
||
<CardHeader>
|
||
<CardTitle>文件上传</CardTitle>
|
||
<CardDescription>上传任意类型文件</CardDescription>
|
||
</CardHeader>
|
||
<CardContent>
|
||
<FileUpload
|
||
imageOnly={false}
|
||
multiple={true}
|
||
maxFiles={3}
|
||
maxSize={10 * 1024 * 1024} // 10MB
|
||
accept={{
|
||
'application/pdf': ['.pdf'],
|
||
'application/msword': ['.doc', '.docx'],
|
||
'text/plain': ['.txt'],
|
||
'image/*': ['.jpeg', '.jpg', '.png', '.gif']
|
||
}}
|
||
placeholder="上传PDF、Word文档、图片等文件"
|
||
onUploadSuccess={(files) => {
|
||
setUploadedFiles(prev => [...prev, ...files])
|
||
console.log('文件上传成功:', files)
|
||
}}
|
||
onUploadError={(error) => {
|
||
console.error('文件上传失败:', error)
|
||
}}
|
||
/>
|
||
</CardContent>
|
||
</Card>
|
||
|
||
{/* 单文件头像上传示例 */}
|
||
<Card>
|
||
<CardHeader>
|
||
<CardTitle>头像上传</CardTitle>
|
||
<CardDescription>单文件头像上传，限制2MB</CardDescription>
|
||
</CardHeader>
|
||
<CardContent>
|
||
<FileUpload
|
||
imageOnly={true}
|
||
multiple={false}
|
||
maxFiles={1}
|
||
maxSize={2 * 1024 * 1024} // 2MB
|
||
placeholder="选择头像图片"
|
||
onUploadSuccess={(files) => {
|
||
console.log('头像上传成功:', files[0])
|
||
}}
|
||
/>
|
||
</CardContent>
|
||
</Card>
|
||
|
||
{/* 上传结果展示 */}
|
||
{uploadedImages.length > 0 && (
|
||
<Card>
|
||
<CardHeader>
|
||
<CardTitle>已上传的图片</CardTitle>
|
||
</CardHeader>
|
||
<CardContent>
|
||
<div className="grid grid-cols-2 md:grid-cols-3 gap-4">
|
||
{uploadedImages.map((image, index) => (
|
||
<div key={index} className="relative">
|
||
<img
|
||
src={image.url}
|
||
alt={image.filename}
|
||
className="w-full h-32 object-cover rounded border"
|
||
/>
|
||
<p className="text-xs text-gray-500 mt-1 truncate">
|
||
{image.filename}
|
||
</p>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</CardContent>
|
||
</Card>
|
||
)}
|
||
</div>
|
||
)
|
||
}
|
||
|
||
// 在AddFoodDialog中使用的示例
|
||
export function FoodImageUpload({
|
||
onImageUpload,
|
||
defaultImage
|
||
}: {
|
||
onImageUpload: (url: string) => void
|
||
defaultImage?: string
|
||
}) {
|
||
return (
|
||
<div className="space-y-2">
|
||
<label className="text-sm font-medium">食物图片</label>
|
||
<FileUpload
|
||
imageOnly={true}
|
||
multiple={false}
|
||
maxFiles={1}
|
||
maxSize={5 * 1024 * 1024} // 5MB
|
||
placeholder="上传食物图片"
|
||
defaultFiles={defaultImage ? [{
|
||
url: defaultImage,
|
||
filename: '当前图片',
|
||
size: 0,
|
||
mimeType: 'image/jpeg'
|
||
}] : []}
|
||
onUploadSuccess={(files) => {
|
||
if (files.length > 0) {
|
||
onImageUpload(files[0].url)
|
||
}
|
||
}}
|
||
onUploadError={(error) => {
|
||
console.error('图片上传失败:', error)
|
||
}}
|
||
/>
|
||
</div>
|
||
)
|
||
} |