Angular 5视图模型无法绑定到.NET Core MVC路由求助

我之前也碰到过一模一样的问题！这种情况基本都是表单数据的传递方式或者MVC模型绑定的配置没踩对点子，给你几个关键的修复步骤：

1. 确保Angular用FormData传递数据 #

上传文件必须使用FormData格式，普通JSON无法携带文件内容，这是导致MVC无法绑定IFormFile的核心原因之一。修改你的addFile()方法：

addFile() {
  // 1. 初始化FormData对象
  const formData = new FormData();
  
  // 2. 追加ViewModel对应的属性值，键名要和C#类的属性名完全匹配
  // 假设你在组件中存储了TdaId的值，比如this.currentTdaId
  formData.append('TdaId', this.currentTdaId.toString());
  
  // 3. 追加文件，注意文件控件的name或ngModel绑定要对应
  // 假设你的文件输入控件绑定了this.selectedFile变量
  formData.append('File', this.selectedFile);

  // 4. 发送POST请求，不需要手动设置Content-Type（浏览器会自动处理multipart边界）
  this.http.post('/YourControllerName/UploadFile', formData)
    .subscribe({
      next: (res) => console.log('上传成功'),
      error: (err) => console.error('上传失败', err)
    });
}

同时，确保你的文件输入控件正确绑定：

<input type="file" name="File" [(ngModel)]="selectedFile" #fileInput="ngModel" accept=".pdf,.docx">

2. 给MVC Action添加[FromForm]特性 #

在.NET Core中，如果你的Controller标注了[ApiController]，模型绑定默认会从请求Body的JSON中获取数据，但我们用的是表单编码的FormData，所以必须明确告诉框架从表单中绑定参数：

[HttpPost]
// 关键：添加[FromForm]指定绑定来源
public IActionResult UploadFile([FromForm] TdaFileUploadRequest request)
{
  // 先检查模型验证状态，排除必填项未传的情况
  if (!ModelState.IsValid)
  {
    return BadRequest(ModelState);
  }

  // 这里就能正常获取TdaId和File了
  var tdaId = request.TdaId;
  var uploadedFile = request.File;

  // 后续文件处理逻辑...
  return Ok("文件上传成功");
}

3. 检查几个容易忽略的细节 #

• 确认表单的enctype="multipart/form-data"已经正确设置（你的代码里已经有了，这点没问题）
• 确保请求是POST方法，GET无法携带文件
• 检查TdaId的传递：如果是从路由参数获取的（比如URL是/tda/{tdaId}/upload），可以把ViewModel拆成路由参数+表单文件，比如：

  [HttpPost("tda/{tdaId}/upload")]
  public IActionResult UploadFile(long tdaId, [FromForm] IFormFile file)
  {
    // 手动构建ViewModel
    var request = new TdaFileUploadRequest { TdaId = tdaId, File = file };
    // ...
  }
  

这样调整后，ViewModel应该就能正常绑定了，不会再出现参数为Null的情况。

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