374 lines
12 KiB
TypeScript
374 lines
12 KiB
TypeScript
|
"use client"
|
|||
|
|
|
|||
|
|
import type React from "react"
|
|||
|
|
|
|||
|
|
import { useState, useRef, useCallback } from "react"
|
|||
|
|
import { Button } from "@/app/components/ui/button"
|
|||
|
|
import { Card, CardContent } from "@/app/components/ui/card"
|
|||
|
|
import { Progress } from "@/app/components/ui/progress"
|
|||
|
|
import { Badge } from "@/app/components/ui/badge"
|
|||
|
|
import { Upload, X, File, ImageIcon, Video, FileText, Download, Eye } from "lucide-react"
|
|||
|
|
import { cn } from "@/app/lib/utils"
|
|||
|
|
|
|||
|
|
export interface UploadedFile {
|
|||
|
|
id: string
|
|||
|
|
name: string
|
|||
|
|
size: number
|
|||
|
|
type: string
|
|||
|
|
url?: string
|
|||
|
|
progress?: number
|
|||
|
|
status: "uploading" | "success" | "error"
|
|||
|
|
error?: string
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
export interface FileUploaderProps {
|
|||
|
|
/** 允许的文件类型 */
|
|||
|
|
accept?: string
|
|||
|
|
/** 是否支持多文件上传 */
|
|||
|
|
multiple?: boolean
|
|||
|
|
/** 最大文件大小（字节） */
|
|||
|
|
maxSize?: number
|
|||
|
|
/** 最大文件数量 */
|
|||
|
|
maxFiles?: number
|
|||
|
|
/** 已上传的文件列表 */
|
|||
|
|
files?: UploadedFile[]
|
|||
|
|
/** 文件变更回调 */
|
|||
|
|
onFilesChange?: (files: UploadedFile[]) => void
|
|||
|
|
/** 文件上传处理函数 */
|
|||
|
|
onUpload?: (file: File) => Promise<{ url: string; id: string }>
|
|||
|
|
/** 文件删除回调 */
|
|||
|
|
onDelete?: (fileId: string) => void
|
|||
|
|
/** 是否禁用 */
|
|||
|
|
disabled?: boolean
|
|||
|
|
/** 自定义类名 */
|
|||
|
|
className?: string
|
|||
|
|
/** 上传区域提示文本 */
|
|||
|
|
placeholder?: string
|
|||
|
|
/** 是否显示预览 */
|
|||
|
|
showPreview?: boolean
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 统一的文件上传组件
|
|||
|
|
* 支持拖拽上传、多文件上传、进度显示、预览等功能
|
|||
|
|
*/
|
|||
|
|
export function FileUploader({
|
|||
|
|
accept,
|
|||
|
|
multiple = false,
|
|||
|
|
maxSize = 10 * 1024 * 1024, // 10MB
|
|||
|
|
maxFiles = 10,
|
|||
|
|
files = [],
|
|||
|
|
onFilesChange,
|
|||
|
|
onUpload,
|
|||
|
|
onDelete,
|
|||
|
|
disabled = false,
|
|||
|
|
className,
|
|||
|
|
placeholder = "点击或拖拽文件到此处上传",
|
|||
|
|
showPreview = true,
|
|||
|
|
}: FileUploaderProps) {
|
|||
|
|
const [isDragging, setIsDragging] = useState(false)
|
|||
|
|
const [uploadingFiles, setUploadingFiles] = useState<UploadedFile[]>([])
|
|||
|
|
const fileInputRef = useRef<HTMLInputElement>(null)
|
|||
|
|
|
|||
|
|
// 获取文件图标
|
|||
|
|
const getFileIcon = (type: string) => {
|
|||
|
|
if (type.startsWith("image/")) return <ImageIcon className="h-8 w-8 text-blue-500" />
|
|||
|
|
if (type.startsWith("video/")) return <Video className="h-8 w-8 text-purple-500" />
|
|||
|
|
if (type.includes("pdf") || type.includes("document")) return <FileText className="h-8 w-8 text-red-500" />
|
|||
|
|
return <File className="h-8 w-8 text-gray-500" />
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 格式化文件大小
|
|||
|
|
const formatFileSize = (bytes: number) => {
|
|||
|
|
if (bytes === 0) return "0 Bytes"
|
|||
|
|
const k = 1024
|
|||
|
|
const sizes = ["Bytes", "KB", "MB", "GB"]
|
|||
|
|
const i = Math.floor(Math.log(bytes) / Math.log(k))
|
|||
|
|
return Number.parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + " " + sizes[i]
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 验证文件
|
|||
|
|
const validateFile = (file: File): string | null => {
|
|||
|
|
if (maxSize && file.size > maxSize) {
|
|||
|
|
return `文件大小不能超过 ${formatFileSize(maxSize)}`
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
if (accept) {
|
|||
|
|
const acceptedTypes = accept.split(",").map((type) => type.trim())
|
|||
|
|
const isAccepted = acceptedTypes.some((type) => {
|
|||
|
|
if (type.startsWith(".")) {
|
|||
|
|
return file.name.toLowerCase().endsWith(type.toLowerCase())
|
|||
|
|
}
|
|||
|
|
return file.type.match(type.replace("*", ".*"))
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
if (!isAccepted) {
|
|||
|
|
return `不支持的文件类型: ${file.type}`
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
if (files.length + uploadingFiles.length >= maxFiles) {
|
|||
|
|
return `最多只能上传 ${maxFiles} 个文件`
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
return null
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 处理文件上传
|
|||
|
|
const handleFileUpload = useCallback(
|
|||
|
|
async (fileList: FileList) => {
|
|||
|
|
if (disabled || !onUpload) return
|
|||
|
|
|
|||
|
|
const filesToUpload = Array.from(fileList)
|
|||
|
|
const newUploadingFiles: UploadedFile[] = []
|
|||
|
|
|
|||
|
|
for (const file of filesToUpload) {
|
|||
|
|
const error = validateFile(file)
|
|||
|
|
if (error) {
|
|||
|
|
// 显示错误通知
|
|||
|
|
console.error(error)
|
|||
|
|
continue
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const uploadFile: UploadedFile = {
|
|||
|
|
id: Math.random().toString(36).substr(2, 9),
|
|||
|
|
name: file.name,
|
|||
|
|
size: file.size,
|
|||
|
|
type: file.type,
|
|||
|
|
progress: 0,
|
|||
|
|
status: "uploading",
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
newUploadingFiles.push(uploadFile)
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
setUploadingFiles((prev) => [...prev, ...newUploadingFiles])
|
|||
|
|
|
|||
|
|
// 逐个上传文件
|
|||
|
|
for (let i = 0; i < newUploadingFiles.length; i++) {
|
|||
|
|
const uploadFile = newUploadingFiles[i]
|
|||
|
|
const file = filesToUpload[i]
|
|||
|
|
|
|||
|
|
try {
|
|||
|
|
// 模拟上传进度
|
|||
|
|
const progressInterval = setInterval(() => {
|
|||
|
|
setUploadingFiles((prev) =>
|
|||
|
|
prev.map((f) => (f.id === uploadFile.id ? { ...f, progress: Math.min((f.progress || 0) + 10, 90) } : f)),
|
|||
|
|
)
|
|||
|
|
}, 200)
|
|||
|
|
|
|||
|
|
const result = await onUpload(file)
|
|||
|
|
|
|||
|
|
clearInterval(progressInterval)
|
|||
|
|
|
|||
|
|
// 上传成功
|
|||
|
|
const successFile: UploadedFile = {
|
|||
|
|
...uploadFile,
|
|||
|
|
url: result.url,
|
|||
|
|
id: result.id,
|
|||
|
|
progress: 100,
|
|||
|
|
status: "success",
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
setUploadingFiles((prev) => prev.filter((f) => f.id !== uploadFile.id))
|
|||
|
|
|
|||
|
|
if (onFilesChange) {
|
|||
|
|
onFilesChange([...files, successFile])
|
|||
|
|
}
|
|||
|
|
} catch (error) {
|
|||
|
|
// 上传失败
|
|||
|
|
setUploadingFiles((prev) =>
|
|||
|
|
prev.map((f) =>
|
|||
|
|
f.id === uploadFile.id
|
|||
|
|
? { ...f, status: "error", error: error instanceof Error ? error.message : "上传失败" }
|
|||
|
|
: f,
|
|||
|
|
),
|
|||
|
|
)
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
[disabled, onUpload, files, onFilesChange, maxSize, maxFiles, accept, uploadingFiles.length],
|
|||
|
|
)
|
|||
|
|
|
|||
|
|
// 处理拖拽
|
|||
|
|
const handleDragOver = useCallback(
|
|||
|
|
(e: React.DragEvent) => {
|
|||
|
|
e.preventDefault()
|
|||
|
|
if (!disabled) {
|
|||
|
|
setIsDragging(true)
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
[disabled],
|
|||
|
|
)
|
|||
|
|
|
|||
|
|
const handleDragLeave = useCallback((e: React.DragEvent) => {
|
|||
|
|
e.preventDefault()
|
|||
|
|
setIsDragging(false)
|
|||
|
|
}, [])
|
|||
|
|
|
|||
|
|
const handleDrop = useCallback(
|
|||
|
|
(e: React.DragEvent) => {
|
|||
|
|
e.preventDefault()
|
|||
|
|
setIsDragging(false)
|
|||
|
|
|
|||
|
|
if (disabled) return
|
|||
|
|
|
|||
|
|
const droppedFiles = e.dataTransfer.files
|
|||
|
|
if (droppedFiles.length > 0) {
|
|||
|
|
handleFileUpload(droppedFiles)
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
[disabled, handleFileUpload],
|
|||
|
|
)
|
|||
|
|
|
|||
|
|
// 处理文件选择
|
|||
|
|
const handleFileSelect = useCallback(
|
|||
|
|
(e: React.ChangeEvent<HTMLInputElement>) => {
|
|||
|
|
const selectedFiles = e.target.files
|
|||
|
|
if (selectedFiles && selectedFiles.length > 0) {
|
|||
|
|
handleFileUpload(selectedFiles)
|
|||
|
|
}
|
|||
|
|
// 清空input值，允许重复选择同一文件
|
|||
|
|
if (fileInputRef.current) {
|
|||
|
|
fileInputRef.current.value = ""
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
[handleFileUpload],
|
|||
|
|
)
|
|||
|
|
|
|||
|
|
// 删除文件
|
|||
|
|
const handleDeleteFile = (fileId: string) => {
|
|||
|
|
if (onDelete) {
|
|||
|
|
onDelete(fileId)
|
|||
|
|
}
|
|||
|
|
if (onFilesChange) {
|
|||
|
|
onFilesChange(files.filter((file) => file.id !== fileId))
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 删除上传中的文件
|
|||
|
|
const handleDeleteUploadingFile = (fileId: string) => {
|
|||
|
|
setUploadingFiles((prev) => prev.filter((file) => file.id !== fileId))
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 重试上传
|
|||
|
|
const handleRetryUpload = (fileId: string) => {
|
|||
|
|
const failedFile = uploadingFiles.find((f) => f.id === fileId)
|
|||
|
|
if (failedFile) {
|
|||
|
|
// 这里需要重新获取原始文件，实际实现中可能需要保存原始文件引用
|
|||
|
|
console.log("重试上传:", failedFile.name)
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const allFiles = [...files, ...uploadingFiles]
|
|||
|
|
|
|||
|
|
return (
|
|||
|
|
<div className={cn("space-y-4", className)}>
|
|||
|
|
{/* 上传区域 */}
|
|||
|
|
<Card
|
|||
|
|
className={cn(
|
|||
|
|
"border-2 border-dashed transition-colors cursor-pointer",
|
|||
|
|
isDragging ? "border-blue-500 bg-blue-50" : "border-gray-300",
|
|||
|
|
disabled && "opacity-50 cursor-not-allowed",
|
|||
|
|
)}
|
|||
|
|
onDragOver={handleDragOver}
|
|||
|
|
onDragLeave={handleDragLeave}
|
|||
|
|
onDrop={handleDrop}
|
|||
|
|
onClick={() => !disabled && fileInputRef.current?.click()}
|
|||
|
|
>
|
|||
|
|
<CardContent className="p-8 text-center">
|
|||
|
|
<Upload className="h-12 w-12 mx-auto mb-4 text-gray-400" />
|
|||
|
|
<p className="text-lg font-medium mb-2">{placeholder}</p>
|
|||
|
|
<p className="text-sm text-gray-500 mb-4">
|
|||
|
|
{accept && `支持格式: ${accept}`}
|
|||
|
|
{maxSize && ` • 最大 ${formatFileSize(maxSize)}`}
|
|||
|
|
{multiple && ` • 最多 ${maxFiles} 个文件`}
|
|||
|
|
</p>
|
|||
|
|
<Button variant="outline" disabled={disabled}>
|
|||
|
|
选择文件
|
|||
|
|
</Button>
|
|||
|
|
</CardContent>
|
|||
|
|
</Card>
|
|||
|
|
|
|||
|
|
{/* 隐藏的文件输入 */}
|
|||
|
|
<input
|
|||
|
|
ref={fileInputRef}
|
|||
|
|
type="file"
|
|||
|
|
accept={accept}
|
|||
|
|
multiple={multiple}
|
|||
|
|
onChange={handleFileSelect}
|
|||
|
|
className="hidden"
|
|||
|
|
disabled={disabled}
|
|||
|
|
/>
|
|||
|
|
|
|||
|
|
{/* 文件列表 */}
|
|||
|
|
{allFiles.length > 0 && (
|
|||
|
|
<div className="space-y-2">
|
|||
|
|
<h4 className="font-medium">已上传文件 ({allFiles.length})</h4>
|
|||
|
|
<div className="space-y-2">
|
|||
|
|
{allFiles.map((file) => (
|
|||
|
|
<Card key={file.id} className="p-3">
|
|||
|
|
<div className="flex items-center space-x-3">
|
|||
|
|
{showPreview && getFileIcon(file.type)}
|
|||
|
|
<div className="flex-1 min-w-0">
|
|||
|
|
<div className="flex items-center justify-between">
|
|||
|
|
<p className="font-medium truncate">{file.name}</p>
|
|||
|
|
<div className="flex items-center space-x-2">
|
|||
|
|
<Badge
|
|||
|
|
variant={
|
|||
|
|
file.status === "success"
|
|||
|
|
? "success"
|
|||
|
|
: file.status === "error"
|
|||
|
|
? "destructive"
|
|||
|
|
: "secondary"
|
|||
|
|
}
|
|||
|
|
>
|
|||
|
|
{file.status === "success" ? "已上传" : file.status === "error" ? "失败" : "上传中"}
|
|||
|
|
</Badge>
|
|||
|
|
<span className="text-sm text-gray-500">{formatFileSize(file.size)}</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
{file.status === "uploading" && <Progress value={file.progress || 0} className="mt-2" />}
|
|||
|
|
|
|||
|
|
{file.status === "error" && file.error && <p className="text-sm text-red-500 mt-1">{file.error}</p>}
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div className="flex items-center space-x-1">
|
|||
|
|
{file.status === "success" && file.url && (
|
|||
|
|
<>
|
|||
|
|
<Button variant="ghost" size="icon" onClick={() => window.open(file.url, "_blank")}>
|
|||
|
|
<Eye className="h-4 w-4" />
|
|||
|
|
</Button>
|
|||
|
|
<Button variant="ghost" size="icon" onClick={() => window.open(file.url, "_blank")}>
|
|||
|
|
<Download className="h-4 w-4" />
|
|||
|
|
</Button>
|
|||
|
|
</>
|
|||
|
|
)}
|
|||
|
|
|
|||
|
|
{file.status === "error" && (
|
|||
|
|
<Button variant="ghost" size="sm" onClick={() => handleRetryUpload(file.id)}>
|
|||
|
|
重试
|
|||
|
|
</Button>
|
|||
|
|
)}
|
|||
|
|
|
|||
|
|
<Button
|
|||
|
|
variant="ghost"
|
|||
|
|
size="icon"
|
|||
|
|
onClick={() =>
|
|||
|
|
file.status === "success" ? handleDeleteFile(file.id) : handleDeleteUploadingFile(file.id)
|
|||
|
|
}
|
|||
|
|
>
|
|||
|
|
<X className="h-4 w-4" />
|
|||
|
|
</Button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</Card>
|
|||
|
|
))}
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
)}
|
|||
|
|
</div>
|
|||
|
|
)
|
|||
|
|
}
|