Angular: невозможно загрузить файл в веб-API с помощью HttpPostedFileBase

Question

Я хочу загрузить файл при отправке формы, но он не публикуется в веб-API.

И сохраните файл по локальному физическому пути, используя Web API.

Здесь я пытаюсь отправить файл, используя FormData, и пытаюсь получить доступ к нему в вызове API, используя HttpPostedFileBase, но его размещение по заданному URL-адресу (без ошибок).

HTML:

<form [formGroup]="employeeForm" (ngSubmit)="save()" #formDir="ngForm" novalidate style="position:relative;" enctype="multipart/form-data">
  <div>
 <input class="form-control" type="text" formControlName="Name">
        <input type="file" id="FileUploader" (change)="onFileChange($event)" #fileInput accept=".pdf,.doc,.docx,.png">
        <button type="button" class="btn btn-sm btn-default" (click)="clearFile()">clear file</button>
      </div>
</form>

Компонент:

myFiles: string[] = [];
  form: FormGroup;
  loading: boolean = false;
  @ViewChild('fileInput') fileInput: ElementRef;

onFileChange(e) {        
  for (var i = 0; i < e.target.files.length; i++) {
    this.myFiles.push(e.target.files[i]);
   } 
  }
save() {
   const frmData = new FormData();
   let fileBrowser = this.fileInput.nativeElement;
   frmData.append("myFile", fileBrowser.files[0]);

      this._employeeService.saveEmployee(this.employeeForm.value, frmData)
        .subscribe((data) => {
          this._router.navigate(['/fetch-employee']);
        }, error => this.errorMessage = error)
    }

Услуга:

saveEmployee(employee, myFile): Observable<any> {
   return this._http.post(this.myAppUrl + 'api/Employee/Create', { employee: employee, myFile: myFile }, {
  headers: {
    'Content-Type': undefined,
    'Accept': 'application/json'
  }
 });
 }

Веб-API:

  public int Create([FromBody] TblEmployee employee, HttpPostedFileBase myFile)
            {
             //code    
            }
     public partial class TblEmployee
        {
            public int EmployeeId { get; set; }
            public string Name { get; set; }              
        }

Answer 1

Вы должны поместить все свои данные в FormData

const frmData = new FormData();
let fileBrowser = this.fileInput.nativeElement;
frmData.append("myFile", fileBrowser.files[0]);
frmData.append("employee", employee);

А в API вы должны использовать IFormFile

public IActionResult Create(string employee, IFormFile myFile)

---

Обновление https://docs.microsoft.com/en-us/aspnet/core/mvc/models/file-uploads?view=aspnetcore-2.1

public class TblEmployee 
{
    // your employee info

    public IFormFile MyFile{ get; set; }
}

public async Task<IActionResult> Register(RegisterViewModel model)

Answer 2

Не добавлять Content-Type заголовок. Пусть браузер обнаружит Content-Type и добавит сам.

Так что закомментируйте это в своем коде

saveEmployee(employee, myFile): Observable<any> {
   return this._http.post(this.myAppUrl + 'api/Employee/Create', { employee: employee, myFile: myFile }, {
    headers: {
    //'Content-Type': undefined,
    'Accept': 'application/json'
    }
  });
}