如何通过POST表单发送麦克风录制的音频Blob对象？

首先，你把Blob转成ArrayBuffer塞到隐藏字段的方式其实不是最优解，甚至可能带来额外的编码问题，更简单可靠的方法是直接用FormData对象来包装Blob，然后通过AJAX发送，或者直接用表单提交（如果不需要异步的话）。

方法一：异步发送（推荐，无页面刷新） #

直接使用FormData来携带Blob，这是处理文件/Blob上传的标准方式，后端框架几乎都能直接解析这种格式，代码示例如下：

// 假设你已经拿到了录制好的Blob对象，比如叫recordedBlob
const formData = new FormData();
// 把Blob添加到FormData：参数分别是服务器接收的字段名、Blob对象、可选的文件名（方便后端识别）
formData.append('audio', recordedBlob, 'recording.wav');

// 用fetch发送POST请求
fetch('/your-server-endpoint', {
  method: 'POST',
  body: formData
})
.then(response => {
  if (!response.ok) {
    throw new Error('网络请求失败');
  }
  return response.json(); // 或者response.text()，根据服务器返回格式调整
})
.then(data => {
  console.log('上传成功:', data);
})
.catch(error => {
  console.error('上传出错:', error);
});

方法二：传统表单提交（页面会刷新） #

如果你想用传统的HTML表单提交，不需要AJAX，可以把Blob转成File对象（File是Blob的子类），然后动态赋值给表单的文件输入框：

<!-- 先准备一个表单，注意必须设置enctype为multipart/form-data -->
<form id="audioForm" action="/your-server-endpoint" method="POST" enctype="multipart/form-data">
  <input type="file" id="audioInput" name="audio" style="display: none;">
  <button type="submit">上传音频</button>
</form>

// 假设recordedBlob是你的音频Blob
const audioFile = new File([recordedBlob], 'recording.wav', { type: recordedBlob.type });
const audioInput = document.getElementById('audioInput');

// 兼容写法：用DataTransfer模拟文件选择
const dataTransfer = new DataTransfer();
dataTransfer.items.add(audioFile);
audioInput.files = dataTransfer.files;

// 提交表单
document.getElementById('audioForm').submit();

为什么不推荐用ArrayBuffer存隐藏字段？ #

• 你需要把ArrayBuffer转成字符串（比如Base64）才能存在隐藏字段里，这会让数据体积增加33%左右，浪费带宽
• 服务器端还要做额外的解码工作，不如直接用multipart/form-data格式上传，后端框架（比如Express、Django、PHP）都有成熟的工具能直接解析出文件

补充：如果坚持用ArrayBuffer的处理方式 #

如果一定要用隐藏字段的方式，你需要把ArrayBuffer转成Base64字符串（因为隐藏字段只能存文本），代码如下：

var arrayBuffer;
var fileReader = new FileReader();
fileReader.onload = function(event) {
  arrayBuffer = event.target.result;
  // 把ArrayBuffer转成Base64字符串
  const base64String = btoa(String.fromCharCode(...new Uint8Array(arrayBuffer)));
  // 设置到隐藏字段
  document.getElementById('hiddenAudioField').value = base64String;
};
fileReader.readAsArrayBuffer(recordedBlob);

但服务器端需要接收这个Base64字符串再解码回二进制数据，步骤繁琐，还是更推荐前面的FormData方案。

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