angular - FromForm 与 IFormFile 使用 Asp.net Core

Question

我想上传一个带有模型数据的图像文件，所以我在api中使用FromFormwith 。IFormFileAsp.net core

[HttpPost]
public IActionResult AddData([FromForm] AddDataModel addDataModel, IFormFile formFile)
{
     // Logic here...
}

我Angular 7在前端使用。我正在添加模型数据和文件FormData并尝试发送它，但它始终所有模型字段值为空。

解决这个问题的正确方法是什么？

Answer 1

表单文件必须在您的AddDataModelcsharp 类中。

像这样

public class AddDataModel 
{
   public IFormFile File { get; set; }
   // more properties
}

然后在您的角度服务中，执行以下操作

public add(model: AddDataModel): Observable<any> { // file can be passed as parameter or inside typescript model
   const formData = new FormData();
   // optional you can pass a file name as third parameter
   formData.append('file', model.file)
   // add more keys to the form-data
   return this.http.post<any>('my-http-url', formData);
}

现在更新端点

[HttpPost]
public IActionResult AddData([FromForm] AddDataModel addDataModel)
{
     // Logic here...
}

现在 ASP.NET Core 的模型绑定器将映射从表单数据中检索到的表单文件。

编辑：

在github上添加了一个准备克隆的简单示例。