带有Web文件上传的角8

Question

我试图上传一个文件使用asp.net 8与web核心，但我没有得到文件在服务器上，我有这个错误。

“无法创建Microsoft.AspNetCore.Http.IFormFile类型的实例。类型是一个接口或抽象类，不能实例化。路径‘病人图像’，第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>

我的角度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 => {});
  }

实现这一目标的其他方法是完全可能的，但这是我当前工作版本的代码。