Angular向WebAPI发送POST请求报415错误，如何正确格式化？

错误核心 #

后端WebAPI要求请求必须是multipart/form-data类型（代码里通过Request.Content.IsMimeMultipartContent()做了校验），但你的Angular代码犯了两个关键错误：

• 手动设置了Content-Type: application/json，和后端要求的类型完全不匹配
• 没有把图片包装成表单数据（FormData）发送，而是直接传递了图片对象

Angular代码修正 #

把图片包装成FormData对象，并且不要手动设置Content-Type（HttpClient会自动为FormData生成带边界值的正确multipart/form-data请求头）：

const formData = new FormData();
// 这里的"image"是表单字段名，后端处理时要对应这个名称
formData.append('image', receivedImage);

this.http.post<any>('http://localhost:[port]/api/sendimage', formData)
.subscribe(
  response => {
    console.log('Response from server:', response);
  },
  error => {
    console.error('Error:', error);
  }
);

WebAPI端补充处理示例 #

确保后端能正确解析FormData里的图片文件，示例代码如下：

[HttpPost]
[Route("api/sendimage")]
public async Task<HttpResponseMessage> UploadImage()
{
    if (!Request.Content.IsMimeMultipartContent())
    {
        throw new HttpResponseException(HttpStatusCode.UnsupportedMediaType);
    }

    // 临时存储上传文件的路径
    var provider = new MultipartFormDataStreamProvider(Path.GetTempPath());
    await Request.Content.ReadAsMultipartAsync(provider);

    // 获取上传的图片文件，注意字段名要和Angular里的"image"一致
    var uploadedFile = provider.FileData.FirstOrDefault(f => 
        f.Headers.ContentDisposition.Name == "\"image\"");
    
    if (uploadedFile != null)
    {
        // 这里可以添加文件保存、处理逻辑，比如读取文件内容
        var tempFilePath = uploadedFile.LocalFileName;
        // ...你的业务逻辑
        return Request.CreateResponse(HttpStatusCode.OK, "图片上传成功");
    }

    return Request.CreateResponse(HttpStatusCode.BadRequest, "未检测到上传的图片");
}

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