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

Question

我在上传文件并将其转换为 json 并传递到我的 .net core webapi Controller 时收到错误请求。

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

这是我在 typescript 中的代码

        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;
        }

我的 Controller :

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


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

                }

                return Ok();
            }

Answer 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 端代码将是这样的。我正在使用 React，但我们向服务器提交表单数据的方式基本上没有什么不同

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

记住将 Content-Type header 设置为“multipart/form-data”