Angular 8+ASP.NET Core Web API文件上传报错：无法实例化IFormFile

我一眼就看出问题所在了——你现在的前后端数据传输方式完全不匹配，导致服务器没法正确解析文件。让我一步步帮你把这个坑填上：

问题根源 #

你服务器端用[FromBody]接收PatientViewModel，但这个特性是用来解析JSON格式请求体的，而IFormFile是个接口，根本没法被JSON序列化/反序列化，这就是你看到那个报错的核心原因。而你前端明明是用FormData封装文件的，这种情况必须用[FromForm]来接收表单数据。

第一步：修改ASP.NET Core控制器方法 #

把[FromBody]换成[FromForm]，让服务器知道要解析表单格式的请求体：

[HttpPost]
[Route("CreatePatient")]
[ProducesResponseType(StatusCodes.Status200OK, Type = typeof(Patient))]
[ProducesResponseType(StatusCodes.Status400BadRequest)]
public async Task<IActionResult> Post([FromForm] PatientViewModel model) {
    (Patient, ServiceResponseMessage) newPatient = await PatientServices.CreateNewPatient(model);
    if (newPatient.Item2.Status == ResponseStatus.Failed) {
        return BadRequest(newPatient.Item2.Message);
    }
    return Ok(newPatient.Item1);
}

第二步：修正Angular组件的上传逻辑 #

你现在的代码把FormData里的文件直接赋值给this.patientInfo.patientImage，这完全错了——patientInfo最终会被序列化为JSON发送，而文件对象根本没法转成JSON。正确的做法是直接把整个FormData作为请求体发送：

// 先在组件里定义一个FormData实例，用来存放所有表单数据（文件+普通字段）
patientFormData: FormData = new FormData();

onUpload(event, type) {
    if (event.files.length == 0) {
        this.toastr.error("No file selected.");
        return;
    }
    const fileToUpload = event.files[0];
    
    // 根据类型把文件添加到FormData
    switch(type) {
        case "patientImage":
            this.patientFormData.append('patientImage', fileToUpload, fileToUpload.name);
            break;
        case "civilId":
            this.patientFormData.append('civilIdPhotoCopy', fileToUpload, fileToUpload.name);
            break;
        case "passbortImage":
            this.patientFormData.append('passportPhotoCopy', fileToUpload, fileToUpload.name);
            break;
    }
    this.toastr.success("Uploaded Successfully", '');
    
    // 别忘了把Comment这类普通字段也塞进FormData
    this.patientFormData.append('Comment', this.patientInfo.comment);
}

// 提交表单的方法（比如绑定到页面的提交按钮）
submitPatient() {
    this.http.post('/api/YourController/CreatePatient', this.patientFormData, {
        // 重点：绝对不要手动设置Content-Type！HttpClient会自动为FormData生成正确的multipart/form-data头
        // 手动设置反而会因为缺少boundary导致解析失败
    }).subscribe(
        response => console.log('Patient created successfully', response),
        error => console.error('Error creating patient', error)
    );
}

第三步：调整HTML的p-fileUpload配置 #

确保组件的name属性和你FormData里的键完全对应，比如上传患者头像的name要改成patientImage，而不是默认的myFile[]：

<p-fileUpload 
    name="patientImage" 
    (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>

额外保险：字段映射一致性 #

因为C#用的是PascalCase，而前端用的是camelCase，为了避免字段映射失败，可以在ViewModel里加上[FromForm]特性明确指定表单键名：

public class PatientViewModel {
    [FromForm(Name = "patientImage")]
    public IFormFile PatientImage { get; set; }
    [FromForm(Name = "comment")]
    public string Comment { get; set; }
}

内容的提问来源于stack exchange，提问作者Mohamed Hamada