React中如何利用Axios请求返回的MP4视频数据展示视频？

要把Axios返回的MP4二进制数据在页面上展示，核心是把二进制数据转换成浏览器能识别的视频资源地址，具体步骤如下：

1. 修改Axios请求，指定正确的响应类型 #

默认情况下Axios会把响应解析为JSON，这会导致MP4二进制数据损坏。你需要在请求里设置responseType: 'blob'，让Axios以Blob对象返回视频数据：

const onGetVideo = () => {
  axiosClient.get(`/solution/video.mp4`, {
    responseType: 'blob' // 关键配置，确保返回Blob类型数据
  })
  .then(({ data }) => {
    handleVideoBlob(data);
  })
  .catch(err => {
    console.log(err)
  })
}

2. 生成视频可访问的临时URL #

用浏览器提供的URL.createObjectURL()方法，把Blob对象转换成一个临时的本地URL，这个URL可以直接赋值给video标签的src属性：

const handleVideoBlob = (blob) => {
  const videoUrl = URL.createObjectURL(blob);
  // 把videoUrl存入组件状态，用于渲染video标签
  setVideoUrl(videoUrl);
}

3. 渲染视频并管理资源生命周期 #

在React组件中，用useState存储视频URL，然后渲染<video>标签。另外要注意，组件卸载时必须调用URL.revokeObjectURL()释放临时URL，避免内存泄漏：

import { useState, useEffect } from 'react';

const VideoPlayer = () => {
  const [videoUrl, setVideoUrl] = useState(null);

  const axiosClient = axios.create({ /* 你的Axios配置 */ });

  const onGetVideo = () => {
    axiosClient.get(`/solution/video.mp4`, { responseType: 'blob' })
      .then(({ data }) => {
        const url = URL.createObjectURL(data);
        setVideoUrl(url);
      })
      .catch(err => console.log(err));
  };

  // 组件卸载时清理临时URL
  useEffect(() => {
    return () => {
      if (videoUrl) {
        URL.revokeObjectURL(videoUrl);
      }
    };
  }, [videoUrl]);

  return (
    <div>
      <button onClick={onGetVideo}>加载视频</button>
      {videoUrl && (
        <video controls width="600">
          <source src={videoUrl} type="video/mp4" />
          你的浏览器不支持视频播放
        </video>
      )}
    </div>
  );
};

export default VideoPlayer;

关键说明 #

• responseType: 'blob'是核心，确保Axios正确处理二进制视频数据
• URL.createObjectURL()生成的是浏览器内部临时URL，仅在当前会话有效，不需要服务器额外支持
• 必须在组件卸载时释放URL，否则会造成内存占用过高

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