Angular 5：如何将文件作为对象属性与表单数据一同上传至Web API？

要把文件作为leaveapplication对象的一部分，和日期、数字等普通字段一起提交给.NET Core API，核心是利用**FormData**来封装所有数据——因为文件无法直接通过JSON格式传递，必须使用multipart/form-data编码类型，而FormData正好是处理这种场景的标准方式。下面一步步给你拆解解决方案：

1. 调整组件中的文件处理逻辑 #

如果你用的是响应式表单（Reactive Forms），先确保表单组包含文件字段，然后在onFileChange中直接存储原生的File对象，不需要转成base64（除非后端明确要求接收base64字符串）：

// 组件内初始化表单（假设你用Reactive Forms）
import { FormBuilder, FormGroup } from '@angular/forms';

constructor(private fb: FormBuilder, private leaveService: LeaveapplicationService) {
  this.form = this.fb.group({
    startdate: [''],
    enddate: [''],
    noofdays: [''],
    attachment: [null] // 用于存储选中的File对象
  });
}

onFileChange(event: Event) {
  const input = event.target as HTMLInputElement;
  if (input.files && input.files.length > 0) {
    const file = input.files[0];
    this.form.get('attachment')?.setValue(file); // 直接保存File对象
  }
}

clearFile() {
  this.form.get('attachment')?.setValue(null);
  const fileInput = document.getElementById('leaveapplication.attachment') as HTMLInputElement;
  fileInput.value = ''; // 重置文件输入框
}

2. 构建FormData并提交 #

在表单提交时，创建FormData实例，把所有普通字段和文件都添加进去，再传给服务：

onSubmit() {
  if (!this.form.valid) return;

  const formData = new FormData();
  // 添加普通表单字段
  formData.append('startdate', this.form.get('startdate')?.value);
  formData.append('enddate', this.form.get('enddate')?.value);
  formData.append('noofdays', this.form.get('noofdays')?.value);
  
  // 添加文件字段（对应后端模型的Attachment属性）
  const file = this.form.get('attachment')?.value;
  if (file) {
    formData.append('attachment', file, file.name);
  }

  // 调用服务提交
  this.leaveService.create(formData).subscribe({
    next: (res) => console.log('申请提交成功！', res),
    error: (err) => console.error('提交失败', err)
  });
}

3. 更新Angular服务的请求方法 #

注意：Angular的Http模块已经废弃，建议换成HttpClient。传递FormData时，不需要手动设置Content-Type，HttpClient会自动设置为multipart/form-data并生成正确的边界：

import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';

@Injectable()
export class LeaveapplicationService {
  constructor(private http: HttpClient) { }

  getLeaveApplications(): Observable<any> {
    return this.http.get('api/LeaveApplications/Get');
  }

  create(formData: FormData): Observable<any> {
    return this.http.post('/api/LeaveApplications', formData);
  }
}

4. .NET Core后端接收处理 #

在后端定义对应的模型，用IFormFile接收文件，同时通过[FromForm]标记模型，表明从表单数据中绑定：

模型定义 #

public class LeaveApplicationRequest
{
    public DateTime StartDate { get; set; }
    public DateTime EndDate { get; set; }
    public int NoOfDays { get; set; }
    public IFormFile? Attachment { get; set; } // 接收文件
}

API控制器方法 #

using Microsoft.AspNetCore.Http;
using Microsoft.AspNetCore.Mvc;
using System.IO;
using System.Threading.Tasks;

[ApiController]
[Route("api/[controller]")]
public class LeaveApplicationsController : ControllerBase
{
    [HttpPost]
    public async Task<IActionResult> Create([FromForm] LeaveApplicationRequest request)
    {
        if (!ModelState.IsValid)
        {
            return BadRequest(ModelState);
        }

        // 处理文件：比如保存到服务器指定目录
        if (request.Attachment != null && request.Attachment.Length > 0)
        {
            var uploadsDir = Path.Combine(Directory.GetCurrentDirectory(), "uploads");
            if (!Directory.Exists(uploadsDir))
            {
                Directory.CreateDirectory(uploadsDir);
            }
            var filePath = Path.Combine(uploadsDir, request.Attachment.FileName);
            using (var stream = new FileStream(filePath, FileMode.Create))
            {
                await request.Attachment.CopyToAsync(stream);
            }
        }

        // 这里添加保存申请到数据库等业务逻辑
        return Ok("申请已提交");
    }
}

可选：如果后端需要base64格式的文件 #

如果你因为某些原因必须用base64传递文件（比如后端不支持IFormFile），可以保留你原来的onFileChange逻辑，把base64对象加到leaveapplication对象中，然后直接提交JSON：

// 组件内构建leaveapplication对象
onSubmit() {
  const leaveapplication = {
    startdate: this.form.get('startdate')?.value,
    enddate: this.form.get('enddate')?.value,
    noofdays: this.form.get('noofdays')?.value,
    attachment: this.form.get('leaveapplication.attachment')?.value // 你的base64对象
  };

  this.leaveService.create(leaveapplication).subscribe(...);
}

// 服务的create方法保持原来的JSON提交
create(leaveapplication: any): Observable<any> {
  return this.http.post('/api/LeaveApplications', leaveapplication);
}

后端模型则需要调整为接收base64的结构：

public class LeaveApplicationRequest
{
    public DateTime StartDate { get; set; }
    public DateTime EndDate { get; set; }
    public int NoOfDays { get; set; }
    public FileAttachment? Attachment { get; set; }
}

public class FileAttachment
{
    public string Filename { get; set; } = string.Empty;
    public string Filetype { get; set; } = string.Empty;
    public string Value { get; set; } = string.Empty; // base64字符串
}

这种方式适合小文件，大文件会导致JSON体积过大，影响性能。

内容的提问来源于stack exchange，提问作者Efron A.