尝试将文件从 Angular 6 发布到 ASP.NET Core Web Api 时出错答案

【问题标题】：Error on try to post file from Angular 6 to ASP.NET Core Web Api尝试将文件从 Angular 6 发布到 ASP.NET Core Web Api 时出错
【发布时间】：2019-08-18 08:39:20
【问题描述】：

我正在尝试使用 multipart/form-data 从 Angular 6 应用程序向 ASP.NET Core 中的 REST 服务发出 POST 请求，但出现错误 500。我尝试了太多解决方案，但没有任何效果。我尝试在 Postman 上执行请求并遇到同样的问题，但我尝试在其他名为 ARC（高级 REST 客户端）的软件中运行，效果非常好，但我不知道为什么。

在服务器端，我收到 InvalidDataException：缺少内容类型边界。在我的项目中，我也在使用 swagger

这是我的代码

角度请求：

public uploadPlanilha(planilha: File, idLote: number): Observable<Array<RequisicaoComposicao>>{
    let formData = new FormData();

    formData.append('arquivo', planilha, planilha.name);
    formData.append('idLote', idLote.toString());

    let httpHeaders = new HttpHeaders();
    httpHeaders = httpHeaders.set("Content-Type", "multipart/form-data");

    return this.httpClient.post<Array<RequisicaoComposicao>>(`${this.API_URL}requisicoes/upload`, formData, {
      headers: httpHeaders
    });
  }

Web Api 中的控制器方法

[HttpPost]
        [Route("upload")]
        [Consumes("multipart/form-data")]
        [DisableRequestSizeLimit]
        public ActionResult<List<RequisicaoComposicao>> PostPlanilhaRequisicoes([FromForm]ArquivoDto arquivoDto)
        {
            try
            {
                using (Stream arquivoPlanilha = arquivoDto.Arquivo.OpenReadStream())
                {
                    List<RequisicaoComposicao> requisicaoComposicoes = _composicaoGestor.Inserir(arquivoPlanilha, int.Parse(arquivoDto.IdLote));
                    return Ok(requisicaoComposicoes);
                }
            }
            catch (Exception)
            {
                return StatusCode(StatusCodes.Status500InternalServerError);
            }
        }

ArquivoDto 类

public class ArquivoDto
        {
            public IFormFile Arquivo { get; set; }
            public string IdLote { get; set; }
        }

【问题讨论】：

HttpHeaders 是不可变的，您需要像let httpHeaders = new HttpHeaders().set("Content-Type", "multipart/form-data").set("Accept", "multipart/form-data"); 一样设置标头，否则每次调用set 时都会返回一个HttpHeaders 的新实例，并且您之前的标头会被覆盖。这就是为什么您没有在服务器上获得 content-type 标头的原因。
我改了这个，但还是不行。我尝试在标头上使用 Content-Type 并尝试不使用此参数，但一切正常。
尝试像let httpHeaders = new HttpHeaders().set("Content-Type", "multipart/form-data")一样使用它，你不能重新分配httpHeaders变量。
另外，如果您使用的是 [FromForm]，那么 Content-Type 应该是 application/x-www-url-formencoded ，但如果您只想发布文件，则删除 [FromForm] 并使用 (IFormFile arquivoDto) 作为参数，在这种情况下，内容类型应该是multipart/form-data

标签： c# angular asp.net-core asp.net-core-webapi

【解决方案1】：

去掉你不需要的[FromForm]标签。

在这一行： formData.append('arquivo', planilha, planilha.name);

改成formData.append('arquivo', planilha);

我从未使用过它，因此我认为您不需要 [Consumes("multipart/form-data")] 属性 ether。（除非你正在使用类似 swagger 的东西，并且你想告诉它这个方法消耗了什么然后保留它）

我也会删除这一行httpHeaders = httpHeaders.set("Accept", "multipart/form-data");

【讨论】：

我正在使用招摇。我删除了您建议的代码，但仍然无法正常工作。
也尝试删除httpHeaders = httpHeaders.set("Content-Type", "multipart/form-data"); 行。
我也试过这个。现在，我收到错误 500。在后端，错误是：System.IO.InvalidDataException: Missing content-type boundary
@ViníciusdaCruzMaia 检查我上面的评论

【解决方案2】：

我使用 AngularJS + ASP.NET Core 2.1 发现同样的错误 --> System.IO.InvalidDataException: Missing content-type boundary.

我的解决方案是在 http 请求前端设置 'Content-Type: undefined'。我在 StackOverflow 的某个地方读到过，如果有帮助，您可以快速尝试一下。

【讨论】：