41 lines
892 B
TypeScript
41 lines
892 B
TypeScript
|
import React from "react";
|
||
|
|
import { useTusUpload } from "@web/src/hooks/useTusUpload"; // 假设 useTusUpload 在同一个目录下
|
||
|
|
import * as tus from "tus-js-client";
|
||
|
|
interface TusUploadProps {
|
||
|
|
onSuccess?: (upload: tus.Upload) => void;
|
||
|
|
onError?: (error: Error) => void;
|
||
|
|
}
|
||
|
|
|
||
|
|
export const TusUploader: React.FC<TusUploadProps> = ({
|
||
|
|
onSuccess,
|
||
|
|
onError,
|
||
|
|
}) => {
|
||
|
|
const { progress, isUploading, uploadError, handleFileUpload } =
|
||
|
|
useTusUpload();
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div>
|
||
|
|
<input
|
||
|
|
type="file"
|
||
|
|
onChange={(e) => {
|
||
|
|
const file = e.target.files?.[0];
|
||
|
|
if (file) handleFileUpload(file, onSuccess, onError);
|
||
|
|
}}
|
||
|
|
/>
|
||
|
|
|
||
|
|
{isUploading && (
|
||
|
|
<div>
|
||
|
|
<progress value={progress} max="100" />
|
||
|
|
<span>{progress}%</span>
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
|
||
|
|
{uploadError && (
|
||
|
|
<div style={{ color: "red" }}>上传错误: {uploadError}</div>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
export default TusUploader;
|