从Angular上传Audio Blob至ASP.NET Web API无文件接收问题求助

1. 移除Angular中手动设置的Content-Type头 #

手动指定multipart/form-data会导致浏览器无法自动生成请求所需的boundary分隔符，这是服务器无法解析文件的核心原因。FormData提交时，Angular会自动处理正确的请求头，无需手动设置。

修改后的Angular代码：

upload(blob: Blob): void {
    const formData = new FormData();
    // 建议给Blob指定文件名和对应格式后缀
    formData.append("file", blob, 'audio-file.mp3');
    
    // 移除手动设置的headers，使用默认配置即可
    this.http.post('/api/fileUpload', formData).subscribe(
      (response) => console.log(response),
      (error) => console.log(error)
    );
}

2. 确保Blob的MIME类型正确 #

创建Audio Blob时，需指定正确的音频MIME类型（如audio/mpeg、audio/wav），否则服务器可能无法识别文件：

// 示例：创建带正确MIME类型的Blob
const audioBlob = new Blob(audioData, { type: 'audio/mpeg' });

3. 更新ASP.NET Web API的文件接收逻辑 #

旧版的HttpContext.Current.Request.Files方式兼容性较差，建议使用ASP.NET Web API推荐的IFormFile接收方式，更稳定且易维护：

[HttpPost]
public IHttpActionResult FileUpload([FromForm] IFormFile file)
{
    if (file != null && file.Length > 0)
    {
        // 处理文件逻辑
        return Ok("文件上传成功");
    }
    return BadRequest("未接收到文件");
}

如果需要接收多个文件，可改用List<IFormFile> files作为参数。

4. 用浏览器开发者工具排查请求 #

打开浏览器开发者工具（F12），切换到Network面板：

• 查看上传请求的FormData是否包含名为file的文件项
• 检查请求头的Content-Type是否格式为multipart/form-data; boundary=----WebKitFormBoundaryxxxxxx（自动生成的boundary是关键）

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