angular - 使用 Angular 在 .NET Core 中保存 FormData

Question

我正在尝试使用 Angular 7 保存一个表单，它包含文件和常规数据。

我正在使用它来发送请求

saveCitaBeneficio(cita: Cita) {
    const formData = new FormData();
    for (var prop in cita) {
        formData.append(prop, cita[prop]);
    }

    let headers = new HttpHeaders().append("Content-Type", "multipart/form-data");
    return this.http.post(`/api/BeneficiosOnline`, formData, { headers: headers });
}

这就是我要调用的端点

    [HttpPost]
    [EnableCors()]
    public async Task<IActionResult> Post([FromForm]CitaWebDto cita)
    {
        if (ModelState.IsValid)
        {
            var result = await _helper.SaveCitaBeneficioOnline(cita);
            return StatusCode(201, result);
        }
        return BadRequest(cita);
    }

使用 Postman 时它工作得很好，但是发送这个表单数据我在后端看到的只是一个空对象，在网络选项卡上我可以看到数据实际上正在发送：

------WebKitFormBoundarybalyvAXgvHxSi7VH
Content-Disposition: form-data; name="correoElectronico"

[e-mail]

我也尝试设置 Content-Disposition 标头，我尝试不指定任何标头，我尝试不添加 [FromForm] 装饰器，但我似乎什么都得不到，只有一个空对象。

编辑：

我现在注意到，即使我在发送之前更改了 Content-Type 标头，Chrome 网络仍然显示为 application/json，我设置错了吗？

标签： angularasp.net-coremultipartform-data

Answer 1

尝试使用 Angular 7 保存表单，它包含文件和常规数据。

要将formdata对象从 Angular 前端发布到 API 后端，您可以参考以下工作示例。

saveCitaBeneficio(cita: Cita) {
  const formData = new FormData();
  for (var prop in cita) {
    formData.append(prop, cita[prop]);
  }

  return this.http.post(
    `https://xxx/api/BeneficiosOnline`,
    formData
  );
}

接口 Cita

interface Cita {
  correoElectronico: string;
  img?: File;
}

使用测试数据调用函数

this.saveCitaBeneficio({
  correoElectronico: '[e-mail]',
  img: this.fileToUpload
}).subscribe(() => {
  console.log('Success!');
});

型号及作用方法

public class CitaWebDto
{
    public string CorreoElectronico { get; set; }
    public IFormFile Img { get; set; }
}

public async Task<IActionResult> Post([FromForm] CitaWebDto cita)
{
    //...

测试结果