Angular上传FormData至.NET Core 3.1 API时文件始终为Null

我之前碰到过一个特别闹心的问题：用Angular通过FormData上传图片到.NET Core 3.1后端，API里接收的IFormFile一直是Null，但用Postman测试却完全正常。折腾了好一阵才找到根源，现在把整个过程和解决方法分享出来。

我的相关代码 #

Angular组件中的上传方法 #

upload() { 
  let formData = new FormData(); 
  formData.append('upload', this.editedImage); 
  console.log("editedImage: " + this.editedImage); 
  console.log("formdata: " + formData); 
  this.imageService.create(formData).subscribe(response => { 
    let temp = response; 
    console.log(temp); 
  }) 
}

Angular服务的POST请求方法 #

create(formData: FormData): Observable<any> { 
  console.log("formdata in service: " + formData.get('upload')); 
  return this.http.post<any>(`${this.url}`, formData).pipe( 
    tap(data => console.log('Image verstuurd: ' + data)), 
    catchError(this.handleError) 
  ); 
}

.NET Core后端API代码 #

[HttpPost] 
async public Task<ActionResult> Save([FromForm]IFormFile file) { 
  // Get reference to blob 
  var uniqueName = $@"{Guid.NewGuid()}-{file.FileName}"; 
  CloudBlockBlob blockBlob = _blobContainer.GetBlockBlobReference(uniqueName); 
  using var ms = new MemoryStream(); 
  file.CopyTo(ms); 
  var stream = ms.ToArray(); 
  await blockBlob.UploadFromByteArrayAsync(stream, 0, stream.Length); 
  return Json(new { name = blockBlob.Name, uri = blockBlob.Uri }); 
}

问题根源与解决办法 #

其实问题特别简单，就是FormData里的键名和后端IFormFile的参数名称不匹配！我在Angular里给FormData加的键是upload，但后端API的参数名叫file，两者对不上，导致后端没法正确把上传的文件绑定到IFormFile对象上。

解决的时候只需要把两边的名称统一就行，有两种方案可选：

方案1：修改Angular的FormData键名 #

把组件里的formData.append('upload', this.editedImage)改成：

formData.append('file', this.editedImage);

方案2：修改后端API的参数名称 #

把后端方法的参数改成：

[FromForm]IFormFile upload

随便选一种改完之后再测试，IFormFile就能正常接收到上传的图片了，亲测有效！

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