如何使用React构建一个高效的视频上传组件

const maxSize = 1024 * 1024 * 1000; // 1GB
<input type="file" accept="video/*" onChange={(e) => {
    const file = e.target.files[0];
    if (file && file.size > maxSize) {
        alert('文件大小不能超过1GB');
        return;
    }
    // 处理文件...
}} />

const validFormats = ['mp4', 'avi', 'mov'];
<input type="file" accept="video/mp4,video/x-msvideo,video/quicktime" onChange={(e) => {
    const file = e.target.files[0];
    const ext = file.name.split('.').pop().toLowerCase();
    if (!validFormats.includes(ext)) {
        alert('仅支持MP4、AVI、MOV格式的视频文件');
        return;
    }
    // 处理文件...
}} />

const [progress, setProgress] = useState(0);

const handleUpload = async (file) => {
    const formData = new FormData();
    formData.append('video', file);

    const xhr = new XMLHttpRequest();
    xhr.open('POST', '/upload', true);
    xhr.upload.onprogress = (event) => {
        if (event.lengthComputable) {
            const percentComplete = (event.loaded / event.total) * 100;
            setProgress(percentComplete);
        }
    };
    xhr.onload = () => {
        console.log('Upload completed');
    };
    xhr.send(formData);
};

"proxy": "http://localhost:5000"

import React, { useState } from 'react';

function VideoUpload() {
    const [selectedFile, setSelectedFile] = useState(null);
    const [progress, setProgress] = useState(0);
    const [message, setMessage] = useState('');

    const maxSize = 1024 * 1024 * 1000; // 1GB
    const validFormats = ['mp4', 'avi', 'mov'];

    const handleFileChange = (e) => {
        const file = e.target.files[0];
        if (!file) return;

        // 文件大小检查
        if (file.size > maxSize) {
            setMessage('文件大小不能超过1GB');
            return;
        }

        // 文件格式验证
        const ext = file.name.split('.').pop().toLowerCase();
        if (!validFormats.includes(ext)) {
            setMessage('仅支持MP4、AVI、MOV格式的视频文件');
            return;
        }

        setSelectedFile(file);
        setMessage('');
    };

    const handleUpload = async () => {
        if (!selectedFile) return;

        const formData = new FormData();
        formData.append('video', selectedFile);

        try {
            const xhr = new XMLHttpRequest();
            xhr.open('POST', '/upload', true);
            xhr.upload.onprogress = (event) => {
                if (event.lengthComputable) {
                    const percentComplete = (event.loaded / event.total) * 100;
                    setProgress(percentComplete);
                }
            };
            xhr.onload = () => {
                if (xhr.status === 200) {
                    setMessage('上传成功');
                } else {
                    setMessage('上传失败，请重试');
                }
                setProgress(0);
            };
            xhr.onerror = () => {
                setMessage('上传失败，请重试');
                setProgress(0);
            };
            xhr.send(formData);
        } catch (error) {
            setMessage('上传失败，请重试');
            setProgress(0);
        }
    };

    return (
        <div>
            <h2>视频上传</h2>
            <input type="file" accept="video/mp4,video/x-msvideo,video/quicktime" onChange={handleFileChange} />
            <button onClick={handleUpload}>上传</button>
            {message && <p>{message}</p>}
            {progress > 0 && <progress value={progress} max="100">{progress}%</progress>}
        </div>
    );
}

export default VideoUpload;