219 lines
6.5 KiB
TypeScript
219 lines
6.5 KiB
TypeScript
'use client';
|
||
import React, { useCallback, useState } from 'react';
|
||
import { useTusUpload } from '../hooks/useTusUpload';
|
||
|
||
interface UploadedFile {
|
||
fileId: string;
|
||
fileName: string;
|
||
url: string;
|
||
}
|
||
|
||
export function FileUpload() {
|
||
const { uploadProgress, isUploading, uploadError, handleFileUpload, getFileUrlByFileId, serverUrl } = useTusUpload();
|
||
|
||
const [uploadedFiles, setUploadedFiles] = useState<UploadedFile[]>([]);
|
||
const [dragOver, setDragOver] = useState(false);
|
||
|
||
// 处理文件选择
|
||
const handleFileSelect = useCallback(
|
||
async (files: FileList | null) => {
|
||
if (!files || files.length === 0) return;
|
||
|
||
for (let i = 0; i < files.length; i++) {
|
||
const file = files[i];
|
||
|
||
try {
|
||
const result = await handleFileUpload(
|
||
file,
|
||
(result) => {
|
||
console.log('Upload success:', result);
|
||
setUploadedFiles((prev) => [
|
||
...prev,
|
||
{
|
||
fileId: result.fileId,
|
||
fileName: result.fileName,
|
||
url: result.url,
|
||
},
|
||
]);
|
||
},
|
||
(error) => {
|
||
console.error('Upload error:', error);
|
||
},
|
||
);
|
||
} catch (error) {
|
||
console.error('Upload failed:', error);
|
||
}
|
||
}
|
||
},
|
||
[handleFileUpload],
|
||
);
|
||
|
||
// 处理拖拽上传
|
||
const handleDrop = useCallback(
|
||
(e: React.DragEvent) => {
|
||
e.preventDefault();
|
||
setDragOver(false);
|
||
handleFileSelect(e.dataTransfer.files);
|
||
},
|
||
[handleFileSelect],
|
||
);
|
||
|
||
const handleDragOver = useCallback((e: React.DragEvent) => {
|
||
e.preventDefault();
|
||
setDragOver(true);
|
||
}, []);
|
||
|
||
const handleDragLeave = useCallback((e: React.DragEvent) => {
|
||
e.preventDefault();
|
||
setDragOver(false);
|
||
}, []);
|
||
|
||
// 处理文件输入
|
||
const handleInputChange = useCallback(
|
||
(e: React.ChangeEvent<HTMLInputElement>) => {
|
||
handleFileSelect(e.target.files);
|
||
},
|
||
[handleFileSelect],
|
||
);
|
||
|
||
// 复制链接到剪贴板
|
||
const copyToClipboard = useCallback(async (url: string) => {
|
||
try {
|
||
await navigator.clipboard.writeText(url);
|
||
alert('链接已复制到剪贴板！');
|
||
} catch (error) {
|
||
console.error('Failed to copy:', error);
|
||
}
|
||
}, []);
|
||
|
||
return (
|
||
<div className="max-w-2xl mx-auto p-6">
|
||
<h2 className="text-2xl font-bold mb-6">文件上传</h2>
|
||
|
||
{/* 服务器信息 */}
|
||
<div className="mb-4 p-3 bg-gray-100 rounded-lg">
|
||
<p className="text-sm text-gray-600">
|
||
服务器地址: <span className="font-mono">{serverUrl}</span>
|
||
</p>
|
||
</div>
|
||
|
||
{/* 拖拽上传区域 */}
|
||
<div
|
||
className={`border-2 border-dashed rounded-lg p-8 text-center transition-colors ${
|
||
dragOver ? 'border-blue-500 bg-blue-50' : 'border-gray-300 hover:border-gray-400'
|
||
}`}
|
||
onDrop={handleDrop}
|
||
onDragOver={handleDragOver}
|
||
onDragLeave={handleDragLeave}
|
||
>
|
||
<div className="space-y-4">
|
||
<div className="text-gray-500">
|
||
<svg className="mx-auto h-12 w-12" stroke="currentColor" fill="none" viewBox="0 0 48 48">
|
||
<path
|
||
d="M28 8H12a4 4 0 00-4 4v20m32-12v8m0 0v8a4 4 0 01-4 4H12a4 4 0 01-4-4v-4m32-4l-3.172-3.172a4 4 0 00-5.656 0L28 28M8 32l9.172-9.172a4 4 0 015.656 0L28 28m0 0l4 4m4-24h8m-4-4v8m-12 4h.02"
|
||
strokeWidth="2"
|
||
strokeLinecap="round"
|
||
strokeLinejoin="round"
|
||
/>
|
||
</svg>
|
||
</div>
|
||
<div>
|
||
<p className="text-lg font-medium text-gray-900">拖拽文件到这里，或者</p>
|
||
<label className="cursor-pointer">
|
||
<span className="mt-2 block text-sm font-medium text-blue-600 hover:text-blue-500">点击选择文件</span>
|
||
<input type="file" multiple className="hidden" onChange={handleInputChange} disabled={isUploading} />
|
||
</label>
|
||
</div>
|
||
<p className="text-xs text-gray-500">支持多文件上传，TUS 协议支持断点续传</p>
|
||
</div>
|
||
</div>
|
||
|
||
{/* 上传进度 */}
|
||
{isUploading && (
|
||
<div className="mt-4 p-4 bg-blue-50 rounded-lg">
|
||
<div className="flex items-center justify-between mb-2">
|
||
<span className="text-sm font-medium text-blue-900">上传中...</span>
|
||
<span className="text-sm text-blue-600">{uploadProgress}%</span>
|
||
</div>
|
||
<div className="w-full bg-blue-200 rounded-full h-2">
|
||
<div
|
||
className="bg-blue-600 h-2 rounded-full transition-all duration-300"
|
||
style={{ width: `${uploadProgress}%` }}
|
||
/>
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{/* 错误信息 */}
|
||
{uploadError && (
|
||
<div className="mt-4 p-4 bg-red-50 border border-red-200 rounded-lg">
|
||
<p className="text-sm text-red-600">
|
||
<span className="font-medium">上传失败：</span>
|
||
{uploadError}
|
||
</p>
|
||
</div>
|
||
)}
|
||
|
||
{/* 已上传文件列表 */}
|
||
{uploadedFiles.length > 0 && (
|
||
<div className="mt-6">
|
||
<h3 className="text-lg font-medium mb-4">已上传文件</h3>
|
||
<div className="space-y-3">
|
||
{uploadedFiles.map((file, index) => (
|
||
<div
|
||
key={index}
|
||
className="flex items-center justify-between p-4 bg-green-50 border border-green-200 rounded-lg"
|
||
>
|
||
<div className="flex items-center space-x-3">
|
||
<div className="flex-shrink-0">
|
||
<svg className="h-8 w-8 text-green-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||
<path
|
||
strokeLinecap="round"
|
||
strokeLinejoin="round"
|
||
strokeWidth="2"
|
||
d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"
|
||
/>
|
||
</svg>
|
||
</div>
|
||
<div>
|
||
<p className="text-sm font-medium text-gray-900">{file.fileName}</p>
|
||
<p className="text-xs text-gray-500">文件ID: {file.fileId}</p>
|
||
</div>
|
||
</div>
|
||
<div className="flex items-center space-x-2">
|
||
<a
|
||
href={file.url}
|
||
target="_blank"
|
||
rel="noopener noreferrer"
|
||
className="text-blue-600 hover:text-blue-800 text-sm font-medium"
|
||
>
|
||
查看
|
||
</a>
|
||
<button
|
||
onClick={() => copyToClipboard(file.url)}
|
||
className="text-gray-600 hover:text-gray-800 text-sm font-medium"
|
||
>
|
||
复制链接
|
||
</button>
|
||
</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{/* 使用说明 */}
|
||
<div className="mt-8 p-4 bg-gray-50 rounded-lg">
|
||
<h4 className="text-sm font-medium text-gray-900 mb-2">使用说明：</h4>
|
||
<ul className="text-xs text-gray-600 space-y-1">
|
||
<li>• 支持拖拽和点击上传</li>
|
||
<li>• 使用 TUS 协议，支持大文件和断点续传</li>
|
||
<li>• 上传完成后可以通过链接直接访问文件</li>
|
||
<li>• 图片和 PDF 会在浏览器中直接显示</li>
|
||
<li>• 其他文件类型会触发下载</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|