angular - 如何将带有图像文件的 Angular 6 对象发送到 web-api？

Question

我想将带有其他表单详细信息的图像文件作为一个对象发布，如下所示

export interface Employee {
    id: Guid;
    firstName: string;
    lastName: string;
    email: string;
    imgFile: File;
    enteredDate: Date;
}

这是我的服务

  addEmployee(employee: Employee) {
    return this.http.post(this.baseUrl + 'employees/add', employee);
  }

是否可以像上面那样发送文件？如果可能如何在 asp.net 核心 web api 中检索该文件？

  [HttpPost("add")]
  public void Add(EmployeeAddDto employeeAddDto)
  {
   ....// save employeeAddDto object to database
  }

在 EmployeeAddDto 中 imgFile 的文件应该是什么？

Answer 1

要上传文件，您需要在客户端使用formdata，在服务器端使用FromForm。

1. 客户视角

   <input id="imgFile" type="file" (change)="addFile($event)" placeholder="Upload file">
   

2. 客户端

   public addFile(element) {
           let data = new FormData();
       data.append('firstName', 'f1');
       data.append('lastName', 'l1');
       data.append('imgFile', element.target.files[0]);
       this.http.post<any>(this.baseUrl + 'api/SampleData/add', data).subscribe(result => {
   
           });
   }
   

3. 服务器 API

   [HttpPost("add")]
   public void Add([FromForm]EmployeeAddDto employeeAddDto)
   {
   }
   

4. 模型

   public class EmployeeAddDto
   {
       public string Id { get; set; }
       public string FirstName { get; set; }
       public string LastName { get; set; }
       public string Email { get; set; }
       public IFormFile ImgFile { get; set; }
       public DateTime EnteredDate { get; set; }
   }