BAD Reuqest 无法创建和填充列表类型 Microsoft.AspNetCore.Http.IFormFileCollection答案

【问题标题】：BAD Reuqest Cannot create and populate list type Microsoft.AspNetCore.Http.IFormFileCollectionBAD Reuqest 无法创建和填充列表类型 Microsoft.AspNetCore.Http.IFormFileCollection
【发布时间】：2019-09-30 00:04:21
【问题描述】：

我在上传文件并将其转换为 json 并传递给我的 .net 核心 webapi 控制器时收到错误请求。

这里是一个错误截图。我也对模型进行了控制台。

这是我的打字稿代码

        const httpHeaders = new HttpHeaders({
          'Content-Type': 'application/json',
        });
        var approval = {
          ...this.MemberApproval,
        };
        console.log(JSON.stringify(approval));
        return this.http.post(this.Url + '/Member/UpdateMember/update',   JSON.stringify(approval), { headers: httpHeaders });

在 .net core webapi 上，我正在这样做。

我的模特：

      public class MemberApproval
        {
            public string Notes;
            public IFormCollection Attachment;
            public int ApprovalStatus;
            public int SubsId;
            public int MemberId;
        }

我的控制器：

         [Route("[action]/{item}")]
            [HttpPost]
            public IActionResult UpdateMember([FromBody]MemberApproval approval )
            {


                if (approval !=null)
                {
                    _repo.UpdateMemberStatus(approval);

                }

                return Ok();
            }

【问题讨论】：

Sending blob files to server的可能重复
将其标记为可能重复。在这里stackoverflow.com/questions/52032438/… 和stackoverflow.com/questions/54424712/… 在这里提出并回答了同样的问题

标签： javascript c# angular typescript asp.net-core

【解决方案1】：

如果你想向 ASP.Net Core 提交文件，你必须像这样使用 FromForm 和 IFormFile

[HttpPost("SavePost")]
public async Task<IActionResult> SavePost([FromForm]PostViewModel viewModel)
{
    var postOptionsViewModel = _jsonParsePostOptionDefaultVm.ToObject(viewModel.PostOptionsViewModel);
    viewModel.PostOptionsDefaultViewModel = postOptionsViewModel;

    if (viewModel.Id.HasValue)
    {
        await _postRepository.EditPost(viewModel);
    }
    else
    {
        await _postRepository.SavePost(viewModel);
    }

    return Ok();
}

我的模型将具有属性列表，因此您可以将多个文件提交到服务器

public List<IFormFile> File { get; set; }

我的 FE 端代码会是这样的。我正在使用反应，但我们向服务器提交表单数据的方式几乎没有什么不同

const formdata = new FormData();
formdata.append("Title", this.state.title);
formdata.append("File", this.state.File);

记得将 Content-Type 标头设置为 'multipart/form-data'

【讨论】：