Angular响应式表单+FormData提交至ASP.NET Core后端参数为空求助

正在学习Angular响应式表单结合FormData的使用，现有表单包含Area、CountryName、Population文本输入字段，以及Image图片上传项。已通过FormData拼接各类数据，但提交表单时，ASP.NET Core Web API的HttpPost接口接收的population对象为空。技术栈为Angular前端、ASP.NET Core Web API后端、EF Core连接PostgreSQL，目标是将图片与输入字段数据一同存储，求解决方法。

相关代码 #

前端代码 #

HTML部分

<form [formGroup]="myForm" (ngSubmit)="formSubmit(myForm.value)">...</form>

TypeScript部分

export class AddDataComponent implements OnInit {...}

后端代码 #

Model部分

namespace filtering.Models{public class population {...}}

Controller部分

[HttpPost("addData")]
public async Task<IActionResult> addPopulation([FromForm] population population){...}

1. 修正Angular表单提交逻辑 #

不要直接传递myForm.value，因为它无法包含文件对象，需手动构建FormData并正确发送请求：

formSubmit() {
  const formData = new FormData();
  // 添加文本字段，键名需与后端Model属性名完全匹配
  formData.append('Area', this.myForm.get('Area')?.value);
  formData.append('CountryName', this.myForm.get('CountryName')?.value);
  formData.append('Population', this.myForm.get('Population')?.value);
  // 添加上传的图片文件
  const file = this.myForm.get('Image')?.value;
  if (file) {
    formData.append('Image', file, file.name);
  }
  // 发送请求时不要手动设置Content-Type，让浏览器自动处理multipart/form-data边界
  this.http.post('/api/addData', formData).subscribe(
    res => console.log('提交成功'),
    err => console.error('提交失败', err)
  );
}

同时修改HTML提交事件，无需传递myForm.value：

<form [formGroup]="myForm" (ngSubmit)="formSubmit()">...</form>

2. 对齐后端Model与FormData键名 #

确保population类的属性名、类型与FormData中的键名、数据类型完全匹配（大小写敏感）：

namespace filtering.Models
{
    public class population
    {
        public string Area { get; set; }
        public string CountryName { get; set; }
        public int Population { get; set; } // 注意与前端输入类型匹配，需确保前端输入可转成int
        public IFormFile Image { get; set; } // 图片字段必须用IFormFile类型接收
    }
}

3. 验证请求内容类型 #

发送FormData请求时，Angular的HttpClient会自动设置正确的Content-Type: multipart/form-data; boundary=xxx，禁止手动设置该请求头，否则会丢失边界信息导致后端无法解析。

4. 检查ASP.NET Core基础配置 #

在.NET 6+的Program.cs中，确保已启用控制器服务（默认已包含，若有自定义配置需确认）：

builder.Services.AddControllers();

可通过Swagger或Postman直接模拟FormData提交，测试接口是否能正常接收数据，快速排查是前端还是后端问题。

5. EF Core存储图片的处理 #

PostgreSQL存储图片通常有两种方式，根据需求选择：

• 存储字节数组：将IFormFile转为byte[]，对应数据库bytea类型：

  [HttpPost("addData")]
  public async Task<IActionResult> addPopulation([FromForm] population population)
  {
      if (population.Image != null)
      {
          using var memoryStream = new MemoryStream();
          await population.Image.CopyToAsync(memoryStream);
          population.ImageData = memoryStream.ToArray(); // 需在Model中添加byte[]类型的ImageData字段
      }
      _context.Populations.Add(population);
      await _context.SaveChangesAsync();
      return Ok();
  }
  

• 存储文件路径：将图片保存到服务器磁盘或云存储，数据库仅存储路径字符串。

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