React中使用antd Upload组件实现视频上传及预览的解决方案求助

实现逻辑：antd Upload组件的onChange回调会返回上传进度、文件状态等信息，当文件上传状态为done时，即可拿到服务端返回的视频资源地址，赋值给状态后即可传入video标签播放；如果需要上传前本地预览，可直接通过本地文件对象生成临时URL实现预览。

可运行参考代码 #

import React, { useState, useEffect } from 'react';
import { Upload, Button, message } from "antd";

export default function UploadComponent(props) {
  // 存储视频资源信息，包含地址和格式
  const [videoInfo, setVideoInfo] = useState({
    src: "",
    type: "video/mp4"
  });

  const handleChange = (info) => {
    // 上传完成状态处理
    if (info.file.status === 'done') {
      message.success(`${info.file.name} 上传成功`);
      // 假设服务端返回结构为 { code: 200, data: { url: '视频地址' } }，根据实际接口调整
      const videoUrl = info.file.response.data.url;
      setVideoInfo({
        src: videoUrl,
        type: "video/mp4"
      });
    } else if (info.file.status === 'error') {
      message.error(`${info.file.name} 上传失败`);
    }

    // 如果需要上传前本地预览，可打开以下注释逻辑
    // if (info.file.originFileObj) {
    //   const localPreviewUrl = URL.createObjectURL(info.file.originFileObj);
    //   setVideoInfo({
    //     src: localPreviewUrl,
    //     type: "video/mp4"
    //   });
    // }
  };

  // 组件卸载时释放本地预览URL占用的内存
  useEffect(() => {
    return () => {
      if (videoInfo.src.startsWith('blob:')) {
        URL.revokeObjectURL(videoInfo.src);
      }
    }
  }, [videoInfo.src]);

  return (
    <div className="action">
      <Upload 
        className="mt-3 mb-3"
        accept=".mp4"
        action="替换为你的实际上传接口地址"
        listType="picture"
        maxCount={1}
        onChange={handleChange}
      >
        <Button>上传视频</Button>
      </Upload>

      {videoInfo.src && (
        <video width="400" controls>
          <source
            src={videoInfo.src}
            type={videoInfo.type}
          />
          您的浏览器不支持HTML5视频播放。
        </video>
      )}
    </div>
  )
}

视频上传实用技巧 #

• 限制上传文件的大小：通过beforeUpload钩子判断文件大小，超出阈值直接返回false终止上传，避免无效带宽占用
• 自定义上传逻辑：如果不需要走默认的action上传，可设置customRequest属性覆盖默认上传行为，适配自身业务接口规范
• 大视频分片上传：针对体积超过100M的视频，建议拆分成分片并行上传，配合断点续传能力，提升上传成功率
• 视频信息预校验：在beforeUpload钩子中可读取视频的时长、分辨率等信息，不符合业务要求的直接拦截，避免上传后再处理的资源浪费
• 避免内存泄漏：使用URL.createObjectURL生成本地预览地址后，在组件卸载或视频切换时，要调用URL.revokeObjectURL释放资源

内容的提问来源于stack exchange，提问作者Abdul Wahab