FromForm 和 IFormFile 使用 Asp.net 核心

Question

我想上传带有模型数据的图像文件，所以我在 Asp.net core api.

中使用 FromForm 和 IFormFile

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

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

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

Answer 1

表单文件必须在您的 AddDataModel csharp class.

中

像这样

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

然后在您的 angular-服务中，执行以下操作

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 上添加了一个简单示例，准备好进行克隆。

FromForm 和 IFormFile 使用 Asp.net 核心

FromForm with IFormFile using Asp.net Core

angular

asp.net-core

iformfile