如何将音频Blob保存至仓库文件系统并通过API发送至后端？

要把录制好的音频Blob通过API发送到后端并存储到数据库，核心是用FormData包装音频数据，再通过HTTP请求提交。以下是具体实现：

1. 封装上传音频的函数 #

用fetch（或axios）发送POST请求，把Blob包装进FormData：

const sendAudioToBackend = async (audioBlob: Blob) => {
  const formData = new FormData();
  // 第三个参数是文件名，后缀要和你录制的音频格式一致（比如wav/mp3）
  formData.append('audioFile', audioBlob, 'user-recording.wav');

  try {
    const response = await fetch('/api/store-audio', {
      method: 'POST',
      body: formData
      // 无需手动设置Content-Type，浏览器会自动添加正确的multipart/form-data头
    });

    if (!response.ok) {
      throw new Error(`上传失败，状态码: ${response.status}`);
    }

    const resData = await response.json();
    console.log('音频已成功上传至后端', resData);
    return resData;
  } catch (err) {
    console.error('上传出错:', err);
    throw err;
  }
};

2. 整合到你的录制流程中 #

在录制完成后，调用上面的上传函数即可（可保留原下载逻辑）：

// 原下载函数不变
const addAudioElement = (blob: any) => {
    const url = URL.createObjectURL(blob);
    const a = document.createElement("a");
    a.download = "file name";
    a.href = url;
    a.click();
    window.URL.revokeObjectURL(url);
};

// 录制完成后的处理函数
const onRecordingFinish = (audioBlob: Blob) => {
  // 可选：继续提供下载功能
  addAudioElement(audioBlob);
  // 上传到后端
  sendAudioToBackend(audioBlob);
};

后端侧要点 #

• 后端接口需要支持接收multipart/form-data类型的请求
• 通过请求体中的audioFile字段获取音频二进制数据
• 将二进制数据存入数据库的BLOB类型字段，或者先存到文件存储服务，再把存储路径存入数据库

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