Angular录制音频上传至C# ASP.NET Web API遇415/400错误求助

问题根源 #

你的代码存在三个核心问题，导致媒体类型不支持或请求无效的错误：

1. 手动设置multipart/form-data请求头：Angular的HttpClient发送FormData时，会自动生成包含boundary的正确Content-Type头，手动设置会丢失boundary，导致后端无法解析请求体。
2. FormData键名与后端参数不匹配：后端API接收参数为IFormFile formFile，但前端使用的键名是Test，参数绑定失败。
3. 上传的Blob缺少文件名与明确MIME类型：后端解析文件时依赖文件名和媒体类型标识，缺失会导致识别失败。

修复步骤 #

1. 修正Angular API请求代码

移除手动设置的Content-Type头，同时调整FormData键名匹配后端参数：

constructor(private http: HttpClient) { }

postAudio(blob: Blob) {
  const formData = new FormData();
  // 键名改为和后端一致的"formFile"，同时指定文件名
  formData.append("formFile", blob, "recording.wav");

  const url = "https://localhost:7048/api/Transcribe/UploadAudio";
  // 无需手动设置headers，HttpClient会自动处理
  return this.http.post(url, formData);
}

2. 上传转换后的标准音频Blob

你已将录制音频转换为WAV格式的wavBlob，但实际上传的是原chunks生成的Blob，建议上传兼容性更好的WAV文件，修改stopRecording方法的上传逻辑：

this.mediaRecorder.onstop = async () => {
  const audioData = await new Blob(this.chunks).arrayBuffer();
  const audioBuffer = await this.audioContext.decodeAudioData(audioData);
  const wavBlob = bufferToWave(audioBuffer, audioBuffer.length);
  this.audioBlobSubject.next(wavBlob);

  // 上传转换后的WAV Blob
  this.service.postAudio(wavBlob).subscribe({
    next: data => console.log("音频上传成功"),
    error: err => console.error("上传失败", err)
  });    

  this.chunks = [];
};

3. 后端API配置验证（可选）

确认ASP.NET Web API配置正常：

• 路由api/Transcribe/UploadAudio正确映射到目标控制器方法
• 无全局中间件拦截multipart/form-data类型请求

验证效果 #

修改完成后重新测试：

• 浏览器请求的Content-Type会自动变为multipart/form-data; boundary=----WebKitFormBoundaryXXXX
• 后端formFile参数会正确绑定上传的音频文件
• 415/400错误将被解决

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