React中使用@ffmpeg/ffmpeg遇FS错误：ErrnoError: FS error求助

可能的成因 #

• exec方法参数格式错误：@ffmpeg/ffmpeg的exec要求所有命令参数以数组形式传入，而非分散的多个参数。错误的参数格式会导致FFmpeg命令执行失败，进而触发FS错误。
• FFmpeg核心未正确加载：默认加载逻辑可能因网络或CORS问题导致核心文件加载失败，未初始化的FFmpeg实例无法正常操作虚拟文件系统。
• 文件名包含特殊字符：上传的文件名如果包含空格、中文或其他特殊字符，会导致FFmpeg命令解析错误，引发FS操作异常。
• API使用冗余转换：对readFile返回值的多余转换可能导致数据损坏，干扰虚拟文件系统的读写流程。

解决步骤 #

1. 修正exec参数格式 #

将分散的命令参数改为数组形式传递：

// 错误写法
await ffmpeg.exec('-i', fileName, ...);

// 正确写法
await ffmpeg.exec([
  '-i',
  'input.mp4',
  '-vf',
  'scale=640:-1',
  '-c:a',
  'aac',
  '-strict',
  '-2',
  'output.mp4'
]);

2. 确保FFmpeg核心正确加载 #

指定稳定的CDN地址加载核心文件，并添加错误捕获：

const loadFFmpeg = async () => {
  if (!ffmpeg.isLoaded) {
    try {
      await ffmpeg.load({
        coreURL: 'https://unpkg.com/@ffmpeg/core@0.12.6/dist/ffmpeg-core.js',
      });
      console.log('FFmpeg核心加载成功');
    } catch (loadError) {
      console.error('FFmpeg核心加载失败:', loadError);
      throw loadError;
    }
  }
};

3. 使用无特殊字符的安全文件名 #

避免文件名中的空格、中文等特殊字符，替换为简洁的固定名称：

const compressVideo = async (selectedFile) => {
  try {
    await loadFFmpeg();

    const arrayBuffer = await selectedFile.arrayBuffer();
    // 使用无特殊字符的安全文件名
    const safeFileName = 'input.mp4';

    await ffmpeg.writeFile(safeFileName, new Uint8Array(arrayBuffer));

    await ffmpeg.exec([
      '-i',
      safeFileName,
      '-vf',
      'scale=640:-1',
      '-c:a',
      'aac',
      '-strict',
      '-2',
      'output.mp4'
    ]);

    // 直接读取文件，简化操作
    const data = await ffmpeg.readFile('output.mp4');
    const compressedVideoBlob = new Blob([data], { type: 'video/mp4' });
    const compressedVideoUrl = URL.createObjectURL(compressedVideoBlob);
    setCompressedFile(compressedVideoUrl);

    // 清理虚拟文件
    await ffmpeg.unlink(safeFileName);
    await ffmpeg.unlink('output.mp4');

    alert('压缩成功');
  } catch (error) {
    console.error('压缩错误:', error);
    alert('压缩失败，请查看控制台详情');
  }
};

4. 简化readFile操作 #

ffmpeg.readFile直接返回Uint8Array，无需额外转换，可直接用于创建Blob：

// 移除冗余的fetchFile函数，直接使用readFile结果
const data = await ffmpeg.readFile('output.mp4');
const compressedVideoBlob = new Blob([data], { type: 'video/mp4' });

5. 检查CORS和网络问题 #

确保FFmpeg核心文件的CDN地址可跨域访问，若使用本地资源需配置服务器允许CORS。

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