react h5 上传视频

在React中，H5上传视频通常涉及HTML5的File API和一些JavaScript库，如react-dropzone或react-file-uploader等。以下是一个简单的步骤描述：

1. **安装依赖**:
首先，你需要安装一些npm包来处理文件上传，比如`react-dropzone`或自定义组件。

npm install react-dropzone axios (如果要发送网络请求)

2. **创建Dropzone组件**:
使用`react-dropzone`的例子：

import React, { useCallback } from 'react';
import { useDropzone } from 'react-dropzone';

function VideoUpload() {
  const onDrop = useCallback(acceptedFiles => {
    // 在这里处理文件上传
  }, []);

  const { getRootProps, getInputProps, isDragActive } = useDropzone({ onDrop });

  return (
    <div {...getRootProps()}>
      <input {...getInputProps()} type="file" multiple />
      {isDragActive ?
        <p>Drop the video files here...</p> :
        <p>Drag 'n' drop some videos or click to select files</p>
      }
    </div>
  );
}

3. **处理文件**:
当用户选择或拖放文件时，会触发`onDrop`回调，你可以解析`acceptedFiles`数组中的每个`File`对象。对于视频文件，检查其类型（`.mp4`, `.mov`, 等），然后可以读取、压缩（如有必要）并用`FormData`构造一个POST请求上传到服务器。

const file = acceptedFiles[0];
if (file.type.startsWith('video/')) {
  const formData = new FormData();
  formData.append('file', file);
  // 发送请求
  axios.post('/api/upload-video', formData).then(response => {
    console.log('Video uploaded:', response.data);
  });
}

4. **错误处理**:
不要忘记添加适当的错误处理，例如网络错误或文件格式不支持。

5. **兼容性和安全性**:
对于跨域问题，可能需要服务器设置CORS头，对于大文件，考虑分块上传。