如何从Angular向ASP.NET Core控制器同时传递文件与其他参数

你的代码存在3处核心错误导致文件接收为空：

• Angular端错误将FormData嵌套在普通对象中提交，没有把模型、文件参数统一放入同一个FormData实例传输
• 手动添加了错误的请求头，multipart/form-data请求头需要携带自动生成的boundary参数，手动指定会导致ASP.NET Core无法正常解析表单字段
• 后端控制器参数没有显式添加[FromForm]绑定特性，无法正确匹配表单字段

1. 修改Angular请求服务代码 #

将模型的所有字段、上传文件全部添加到同一个FormData实例中，不要手动设置multipart相关请求头：

createRestaurant(model: Restaurant, file: File){
  const formData = new FormData();
  // 逐个添加Restaurant模型的所有属性，字段名需和后端Restaurant类属性名对应，前缀和后端接收参数名一致
  formData.append('restaurant.Name', model.name);
  formData.append('restaurant.Address', model.address);
  formData.append('restaurant.Phone', model.phone);
  // 其他Restaurant属性按上述规则补全
  // 添加文件，参数名和后端接收的IFormFile参数名完全一致
  formData.append('File', file);
  // HttpClient会自动识别FormData并添加正确的请求头，无需手动设置
  return this.http.post(this.url, formData);
}

2. 修改Angular调用代码 #

直接传入模型和文件对象即可：

this.dataService.createRestaurant(this.restaurant, this.file)
    .subscribe((data: Restaurant) => this.loadProducts(data))

3. 修改ASP.NET Core控制器代码 #

给参数添加[FromForm]特性显式指定从表单绑定：

public IActionResult Post([FromForm] Restaurant restaurant, [FromForm] IFormFile File)
{
    // 业务代码
}

你也可以直接把文件字段放到Restaurant模型中，减少控制器参数：

public class Restaurant
{
    // 原有属性
    public string Name { get; set; }
    public string Address { get; set; }
    // 新增文件属性
    public IFormFile File { get; set; }
}

控制器简化为：

public IActionResult Post([FromForm] Restaurant restaurant)
{
    // 直接通过restaurant.File获取上传文件
}

对应的前端添加FormData字段时不需要加restaurant.前缀：

formData.append('Name', model.name);
formData.append('Address', model.address);
formData.append('File', file);

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