76 lines
2.2 KiB
TypeScript
76 lines
2.2 KiB
TypeScript
import React, { useState } from 'react';
|
||
import { useTusUpload } from '../hooks/useTusUpload';
|
||
|
||
export function SimpleUploadExample() {
|
||
const { uploadProgress, isUploading, uploadError, handleFileUpload, getFileUrlByFileId } = useTusUpload();
|
||
const [uploadedFileUrl, setUploadedFileUrl] = useState<string>('');
|
||
|
||
const handleFileChange = async (e: React.ChangeEvent<HTMLInputElement>) => {
|
||
const file = e.target.files?.[0];
|
||
if (!file) return;
|
||
|
||
try {
|
||
const result = await handleFileUpload(
|
||
file,
|
||
(result) => {
|
||
console.log('上传成功！', result);
|
||
setUploadedFileUrl(result.url);
|
||
},
|
||
(error) => {
|
||
console.error('上传失败：', error);
|
||
},
|
||
);
|
||
} catch (error) {
|
||
console.error('上传出错：', error);
|
||
}
|
||
};
|
||
|
||
return (
|
||
<div className="p-6 max-w-md mx-auto bg-white rounded-lg shadow-md">
|
||
<h3 className="text-lg font-semibold mb-4">简单上传示例</h3>
|
||
|
||
<div className="mb-4">
|
||
<input
|
||
type="file"
|
||
onChange={handleFileChange}
|
||
disabled={isUploading}
|
||
className="block w-full text-sm text-gray-500 file:mr-4 file:py-2 file:px-4 file:rounded-md file:border-0 file:text-sm file:font-semibold file:bg-blue-50 file:text-blue-700 hover:file:bg-blue-100"
|
||
/>
|
||
</div>
|
||
|
||
{isUploading && (
|
||
<div className="mb-4">
|
||
<div className="flex justify-between mb-1">
|
||
<span className="text-sm font-medium text-blue-700">上传进度</span>
|
||
<span className="text-sm font-medium text-blue-700">{uploadProgress}%</span>
|
||
</div>
|
||
<div className="w-full bg-gray-200 rounded-full h-2">
|
||
<div
|
||
className="bg-blue-600 h-2 rounded-full transition-all duration-300"
|
||
style={{ width: `${uploadProgress}%` }}
|
||
></div>
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{uploadError && (
|
||
<div className="mb-4 p-3 bg-red-100 border border-red-400 text-red-700 rounded">{uploadError}</div>
|
||
)}
|
||
|
||
{uploadedFileUrl && (
|
||
<div className="mb-4 p-3 bg-green-100 border border-green-400 text-green-700 rounded">
|
||
<p className="text-sm font-medium mb-2">上传成功！</p>
|
||
<a
|
||
href={uploadedFileUrl}
|
||
target="_blank"
|
||
rel="noopener noreferrer"
|
||
className="text-blue-600 hover:text-blue-800 underline text-sm"
|
||
>
|
||
查看文件
|
||
</a>
|
||
</div>
|
||
)}
|
||
</div>
|
||
);
|
||
}
|