Function Home

app/page.tsx:11–273

()

const API_URL = 'http://localhost:1998'

export default function Home() {
    const [file, setFile] = useState<File | null>(null)
    const [prisignedGetUrl, setPrisignedGetUrl] = useState("")
    const [process, setProcess] = useState(0)
    const [tip, setTip] = useState("")

    function generateRandomString() {
        const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz';
        let result = '';
        for (let i = 0; i < 10; i++) {
            result += characters.charAt(Math.floor(Math.random() * characters.length));
        }
        return result;
    }

    function upload(url: string, file: File, onProgress: (event: ProgressEvent<EventTarget>) => void) {
        return new Promise((res, rej) => {
            const xhr = new XMLHttpRequest();
            xhr.open('PUT', url);

            xhr.onload = e => {
                res("")
            };
            xhr.onerror = rej;
            if (xhr.upload && onProgress)
                xhr.upload.onprogress = onProgress;
            xhr.send(file);
        });
    }

    useEffect(() => {
        if (file === null) return
        const uploadFile = async (file: File) => {
            const fileName = `${file.name}`.replaceAll(
                /[^a-zA-Z0-9.]/g,
                "-"
            );
            const now = new Date()
            const date = `${now.getFullYear()}-${now.getMonth() + 1}-${now.getDate()}-${now.getHours()}`
            const objectKey = date + "-" + generateRandomString() + "-" + fileName
            const requestUrl = `${API_URL}/presigned-url?key=${objectKey}&content-length=${file.size}&no-wait=5&max-requests=2&expire=1800&limit-rate=5242880&force-download=true`
            const response = await fetch(requestUrl)
            if (!response.ok) {
                console.log("error", response.status)
                return
            }

            // 获取一个签名的put-url和get-url
            const result = await response.json()
            const presignedGetUrl = result['get-url']
            const presignedPutUrl = result['put-url']
            setPrisignedGetUrl(presignedGetUrl)

            await upload(presignedPutUrl, file, function (event) {
                if (event.lengthComputable) {
                    setProcess(event.loaded / event.total * 100)
                }
            })