ReactJS中如何将BlobUrl转为MP3？录音上传Firebase遇格式问题

核心问题分析 #

1. 上传时传递base64字符串而非原生Blob/File对象，导致Firebase无法正确识别文件类型
2. 上传过程未显式设置音频文件的Content-Type元数据
3. 函数命名（uploadImage）与功能不符，易引发逻辑混淆

具体修复方案 #

1. 正确处理录制的音频Blob #

修改上传逻辑，直接从mediaBlobUrl获取Blob并转换为标准File对象，避免base64转换：

const audioUpload = async () => {
  if (!mediaBlobUrl) return;

  // 从录制的URL获取Blob对象
  const response = await fetch(mediaBlobUrl);
  const audioBlob = await response.blob();

  // 封装为File对象，指定文件名和MIME类型
  const audioFile = new File(
    [audioBlob],
    `recording-${Date.now()}.m4a`,
    { type: "audio/m4a" }
  );

  // 调用修正后的上传函数
  await uploadAudio(audioFile, user);
};

2. 修正Firebase上传函数 #

重命名函数并添加元数据配置，确保Firebase识别正确的文件类型：

const uploadAudio = async (file: File, user: IUser): Promise<IUploadImage | null> => {
  const storage = getStorage(firebaseApp);

  // 路径添加.m4a后缀，辅助Firebase识别类型
  const child = `1abcd/koray-test/${idGenerator()}.m4a`;
  const audioRef = ref(storage, child);

  // 显式设置文件元数据
  const metadata = {
    contentType: file.type
  };

  // 使用Firebase原生uploadBytes方法（若封装了uploadToFirebase，需确保传递metadata参数）
  const snapshot = await uploadBytes(audioRef, file, metadata);

  if (!snapshot) {
    return null;
  }

  const fbReference = snapshot.ref.fullPath;
  return { fbReference, file };
};

3. 移除冗余的FileReader转换 #

删除原代码中reader.result?.toString()的转换逻辑，直接上传Blob/File对象即可。

4. 验证音频格式兼容性 #

部分浏览器可能不支持直接录制audio/m4a，可先打印Blob实际类型确认：

console.log(audioBlob.type);

若实际输出为audio/webm，则需调整useReactMediaRecorder的配置：

useReactMediaRecorder({
  audio: true,
  blobPropertyBag: {
    type: "audio/webm"
  },
});

同时同步修改上传时的文件名后缀和Content-Type。

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