React中视频数据类型识别及转HTML视频源方法咨询

1. 接收的数据类型/格式 #

你看到的data: (773491) 0, 0, 0, 32, 102...是二进制视频数据被axios默认解析成的TypedArray（通常是Uint8Array）。因为axios默认会尝试将响应按JSON格式解析，而视频文件属于二进制流，当未指定响应类型时，axios会把二进制数据转换为数字数组的形式返回，所以控制台会显示这类数字序列。

2. 转换为HTML视频元素可用的格式 #

需要通过调整axios请求配置，并正确处理响应数据来解决：

步骤1：修改axios请求，指定响应类型为Blob #

在请求中添加responseType: 'blob'，让axios直接将二进制响应解析为Blob对象（专门用于处理文件类二进制数据的对象）：

axios({
  method: "get",
  url: `http://localhost:3001/getGalleryVideos`,
  responseType: 'blob' // 关键配置：指定响应为Blob类型
})
.then((res) => {
  const videoBlob = res.data[0];
  // 生成可直接用于video元素的临时URL
  const videoUrl = URL.createObjectURL(videoBlob);
  setVideo(videoUrl);
})
.catch(err => {
  console.error('获取视频失败:', err);
});

步骤2：在组件中使用video元素 #

确保video元素正确绑定生成的URL：

<video controls src={video} />

重要优化：避免内存泄漏 #

组件卸载时，需要手动释放createObjectURL生成的临时URL，防止内存泄漏：

import { useEffect } from 'react';

// 在组件内添加这个副作用钩子
useEffect(() => {
  return () => {
    if (video) {
      URL.revokeObjectURL(video);
    }
  };
}, [video]);

备选方案：使用Data URL（适合小体积视频） #

如果不想使用临时URL，也可以将Blob转换为Data URL字符串（大文件不推荐，会占用较多内存）：

axios({
  method: "get",
  url: `http://localhost:3001/getGalleryVideos`,
  responseType: 'blob'
})
.then((res) => {
  const videoBlob = res.data[0];
  const reader = new FileReader();
  reader.onload = (e) => {
    setVideo(e.target.result); // e.target.result是Data URL字符串
  };
  reader.readAsDataURL(videoBlob);
});

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