Angular 8 с загрузкой файлов через веб-API

Question

Я пытаюсь загрузить файл, используя Angular 8, с ядром веб-API asp.net, но я не получаю файл на сервере, и у меня появляется эта ошибка.

"не удалось создать экземпляртипа Microsoft.AspNetCore.Http.IFormFile. Тип - это интерфейс или абстрактный класс, создание которого невозможно. Путь 'PatientImage', строка 1, позиция 367. "

Метод моего контроллера -

[HttpPost]
[Route("CreatePatient")]
[ProducesResponseType(StatusCodes.Status200OK, Type = typeof(Patient))]
[ProducesResponseType(StatusCodes.Status400BadRequest)]
public async Task<IActionResult> Post([FromBody] PatientViewModel model)
{
    (Patient, ServiceResponseMessage) newPatient = await PatientServices.CreateNewPatient(model);

    if (newPatient.Item2.Status == ResponseStatus.Failed)
    {
        return BadRequest(newPatient.Item2.Message);
    }
    return Ok(newPatient.Item1);
}

Часть моего класса -

public class PatientViewModel {
    public IFormFile PatientImage { get; set };
    public string Comment { get; set; }
}

Мой HTML-файл -

<h5 class="sub-title">Please Upload Your Image</h5>
<div class="ui-fileupload">
    <p-fileUpload name="myFile[]" (onBeforeSend)="onBeforeSend($event)" enctype="multipart/form-data"
        accept="application/msword,application/pdf, image/*" [showUploadButton]="togglePatientImageUploadButtons"
        [showCancelButton]="togglePatientImageUploadButtons" customUpload="true"
        (onSelect)="showAtView($event, 'patientImage')" (uploadHandler)="onUpload($event, 'patientImage');"
        maxFileSize="50000000">
        <ng-template pTemplate type="content">
            <ul *ngIf="uploadedPatientImage.length">
                <li *ngFor="let file of uploadedPatientImage">{{file.name}} - {{file.size}} bytes</li>
            </ul>
        </ng-template>
    </p-fileUpload>
    <p-messages [(value)]="patientImageError"></p-messages>
</div>

Мой Angular 2-компонентный метод - это метод

onUpload(event, type) {
    if (event.files.length == 0) {
        this.toastr.error("No file selected.");
        return;
    }

    var fileToUpload = event.files[0];
    let formData: FormData = new FormData();
    // input.append("file", fileToUpload);


    if (type == "patientImage") {
        formData.append('patientImage', fileToUpload, fileToUpload.name);
        this.patientInfo.patientImage = formData.get('patientImage');
        this.toastr.success("Uploaded Successfully", '');

    }

    else if (type == "civilId") {
        formData.append('uploadCivilId', fileToUpload, fileToUpload.name);
        this.patientInfo.civilIdPhotoCopy = formData.get('uploadCivilId');
        this.toastr.success("Uploaded Successfully", '');

    }
    else if (type == "passbortImage") {
        formData.append('uploadPassportPhotoCopy', fileToUpload, fileToUpload.name);
        this.patientInfo.passportPhotoCopy = formData.get('uploadPassportPhotoCopy');
        this.toastr.success("Uploaded Successfully", '');
    }
}

Answer 1

Код основного контроллера ASP.Net:

[HttpPost("files", Name = "UploadFile")]
[Route("[action]/{FileName}")]
public async Task<IActionResult> UploadFile(string FileName, List<IFormFile> files)
{ 
try
{foreach (var formFile in files)
{
if (formFile.Length > 0)
{
using (var stream = new FileStream("PathToExportTo+FileName", FileMode.Create))
{
await formFile.CopyToAsync(stream);
}
}
}
return Ok();
}
catch (Exception ex)
{
//no actual error handling
return Ok();
}

HTML:

<label for=FileUploader ><input id=FileUploader type="file" multiple="false" (change)="upload($event.target.files)" /></label>

Код компонента:

upload(files: File[]) {
    this._sharedService.UploadFile(files, "FileName");

Сервисный код:

  UploadFile(files: File[], FileName) {
    var formData = new FormData();
    Array.from(files).forEach(f => formData.append("files", f));
    this.http
      .post("PathToAPI" + FileName, formData)
      .subscribe(event => {});
  }

Вполне возможно, что есть и другие способы добиться этого, но это моя текущая рабочая версия кода.