c# - WebAPI 核心 IFormFile 始终显示为空

Question

我有一个 Angular 4 的前端和一个 ASP.NET Core WebAPI 的后端，它们的功能是，将一个人的数据和简历发送到一个 SQL Server 数据库，但是。 .. 捕获数据并将文件发送到数据库的方法的 IFormFile 始终为空。

我已经尝试了我在互联网上找到的所有类型的解决方案，但没有一个对我有用。

作为 Post 方法的响应，我收到了这个异常

An unhandled exception occurred while processing the request.  
  NullReferenceException: Object reference not set to an instance of an object.  
  WebApplication.Controllers.CandidateController+<Post>d__4.MoveNext() in CandidateController.cs, line 60

我在下面粘贴了执行此操作的项目的部分代码。

完整代码的github链接:
front-end code
back-end code

HTML

<form class="col-md-6 offset-md-3" method="POST" enctype="multipart/form-data" #form="ngForm" (ngSubmit)="onSubmit(form)">
  <div class="form-group row">
    <label for="name" class="col-sm-2 col-form-label">Name</label>
    <div class="col-sm-10">
      <input type="text" class="form-control" placeholder="Nome completo" id="name"  name="name" ngModel />
    </div>
  </div>
  <div class="form-group row">
    <label for="email" class="col-sm-2 col-form-label">Email</label>
    <div class="col-sm-10">
      <input type="email" class="form-control" id="email" placeholder="Email" name="email" ngModel />
      <small id="emailHelp" class="form-text text-muted">
        We'll never share your email with anyone else.
      </small>
    </div>
  </div>
  <div class="form-group row">
    <label for="country" class="col-sm-2 col-form-label">Country</label>
    <div class="col-sm-10">
      <input type="text" class="form-control" id="country" placeholder="Country" name="country" ngModel />
    </div>
  </div>
  <div class="form-group row">
    <label for="state" class="col-sm-2 col-form-label">State</label>
    <div class="col-sm-10">
      <input type="text" class="form-control" id="state" placeholder="Estado" name="state" ngModel />
    </div>
  </div>
  <div class="form-group row">
    <label for="city" class="col-sm-2 col-form-label">City</label>
    <div class="col-sm-10">
      <input type="text" class="form-control" id="city" placeholder="Cidade" name="city" ngModel />
    </div>
  </div>
  <div class="form-group row">
    <label for="file" class="col-sm-2 col-form-label">Curriculum</label>
    <div class="col-sm-10">
        <input type="file" id="file" name="file" ngModel />
    </div>
  </div>
  <div class="container text-center">
    <button type="submit" class="btn btn-outline-dark">Submit</button>
  </div>
</form>

Angular 4

onSubmit(form: NgForm) {
  const { file } = form.value;
  delete form.value.file;

  var data = new FormData();
  data.append('Candidates', JSON.stringify(form.value));
  data.append('file', file);

  console.log(form.value);
  console.log(file);

  const headers = new Headers();
  headers.append('Access-Control-Allow-Origin', '*');

  const options = new RequestOptions({headers: headers});

  this.http.post("http://localhost:54392/api/candidates", data, options)
    .subscribe(
      data => {
        console.log("Foi");
      },
      error => {
        console.log("Não foi");
      });
}

C#

[HttpPost("candidates")]
public async Task<IActionResult> Post(IFormFile file)
{
    var json = HttpContext.Request.Form["Candidates"];      
    var jsonTextReader = new JsonTextReader(new StringReader(json));
    var candidate = new JsonSerializer().Deserialize<Candidate>(jsonTextReader);

    if (!ModelState.IsValid) 
        return BadRequest();

    using (var memoryStream = new MemoryStream())
    {
        await file.OpenReadStream().CopyToAsync(memoryStream);
        candidate.CurriculumVitae = memoryStream.ToArray();
    }
    await dataBase.AddAsync(candidate);
    dataBase.SaveChanges();
    return Ok(candidate);
}

Answer 1

Upload images in Angular 4 without a plugin提供您尝试实现的过程的演练。它使用 @ViewChild 获取对 DOM 中文件输入的引用，然后在构建 FormData 时使用它。在您的场景中，这涉及一些更改，如下所示:

1. 将 HTML 中文件输入的 ngModel 替换为 #file。这会创建一个 template reference variable在下一步中使用 @ViewChild 时可以在组件内部访问。
2. 将 @ViewChild('file') fileInput; 添加到构造函数上方的组件。这会将 #file 模板引用变量链接到您的组件代码。

3. 从您的组件中删除以下代码:

   const { file } = form.value;
   delete form.value.file;
   

   此时 file 属性将不再存在，因此无需删除任何内容。

4. 将 data.append('file', file); 替换为以下内容:

   let fileBrowser = this.fileInput.nativeElement;
   if (fileBrowser.files && fileBrowser.files[0]) {
       data.append("file", fileBrowser.files[0]);
   }
   

   最后的代码块获取文件句柄并将其附加到您的 FormData。

您可以随意命名变量和模板引用变量。唯一需要具体说明的是 data.append 中使用的字符串值 file must 与用于 C# IFormFile 变量。

顺便说一句，您还可以删除自定义 Headers 和 RequestOptions，将 Access-Control-Allow-Origin 设置为请求 header 在这里什么都不做。此 header 应由服务器在响应中设置。