在Create React App中如何将Webpack导入的视频转为File()或Blob()对象？

当你通过import sample1 from './assets/sample1.mp4';导入视频后，Webpack返回的是资源的访问URL，你可以通过fetch请求这个URL来获取Blob对象，再进一步转换为File对象，无需修改Webpack配置。

具体实现步骤： #

1. 保持原有导入方式不变：

import sample1 from './assets/sample1.mp4';

2. 编写异步函数完成转换：

async function convertToBlobAndFile() {
  // 请求资源URL获取响应
  const response = await fetch(sample1);
  // 将响应转为Blob对象
  const blob = await response.blob();
  // 将Blob转为File对象（可选，根据需求选择）
  const file = new File([blob], 'sample1.mp4', { type: blob.type });
  
  return { blob, file };
}

3. 在React组件中的使用示例：

import { useEffect, useState } from 'react';
import sample1 from './assets/sample1.mp4';

function VideoComponent() {
  const [videoBlob, setVideoBlob] = useState(null);
  const [videoFile, setVideoFile] = useState(null);

  useEffect(() => {
    async function loadVideoAssets() {
      const { blob, file } = await convertToBlobAndFile();
      setVideoBlob(blob);
      setVideoFile(file);
    }
    loadVideoAssets();
  }, []);

  return (
    <div>
      {videoBlob && <p>已获取Blob对象，大小：{(videoBlob.size / 1024 / 1024).toFixed(2)}MB</p>}
      {videoFile && <p>已获取File对象，文件名：{videoFile.name}</p>}
    </div>
  );
}

export default VideoComponent;

补充说明： #

• 这种方式依赖浏览器的fetch API，在CRA的开发和生产环境都能正常工作，因为Webpack处理后的资源URL是可访问的。
• FileReader的作用是读取Blob/File的内容（比如转成DataURL），而不是用来将URL转换为Blob/File，所以之前的思路误区在这里，fetch才是正确的转换路径。

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