如何解决Angular TS向C# WebAPI传表单文件时后端IFormFile为null的问题

当前接口收到的file始终为null，核心原因有三个：

• 前端没有构造合规的multipart/form-data格式请求体。直接传递普通JS对象的写法，会被Angular HttpClient默认序列化为application/json格式的请求体，而[FromForm]特性只会解析表单类格式的请求内容，根本无法读取JSON结构中的字段值。
• 普通JS对象中嵌入File对象的写法，序列化过程中File实例会被转成空对象，完全丢失文件本身的二进制流内容。
• 前端传递的普通字段名不符合后端表单模型的绑定规则。

必须使用原生FormData对象承载所有表单字段和文件内容，按照后端要求的字段名逐个追加值，参考实现如下：

public getTranslatedJson(
  json: File,
  destinatonLanguage: Language
) {
  // 初始化原生FormData实例
  const formData = new FormData();
  // 按后端LanguageCharset类的属性名追加普通字段
  formData.append("SystemId", destinatonLanguage.systemId);
  // 按后端绑定的参数名追加文件字段，第三个参数传入原始文件名
  formData.append("file", json, json.name);

  return this.http.post(this.url, formData, {
    responseType: "blob",
    observe: "response"
  });
}

• 不要手动在请求配置中设置Content-Type: multipart/form-data。手动设置会缺失表单必须的boundary分隔标识，导致后端无法正确拆分不同的表单字段，必须让浏览器根据FormData的内容自动生成带boundary的请求头。
• FormData中追加的字段名必须和后端模型绑定要求的名称严格匹配，大小写、拼写都不能有差异。
• 排查时可以先抓包看请求头的Content-Type格式，正常的表单请求头应该是multipart/form-data; boundary=----WebKitFormBoundaryxxx的结构，如果不是该格式就说明请求构造存在问题。
• 针对.NET WebAPI的[FromForm]绑定逻辑，复杂自定义类型的绑定会匹配类的公开属性名，不会匹配方法上的参数名，这是新手极易踩的绑定规则误区。

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