如何用DropzoneJS将文件存入Angular ViewModel并发送至.NET WebApi

我来帮你一步步实现这个需求——把包含文件列表的MainRequestViewModel从Angular客户端发送到.NET WebApi。核心思路是用FormData来处理文件上传（这是最高效的方式，避免base64的体积浪费），下面分客户端和服务端两部分详细说明：

一、Angular客户端实现 #

1. 完善ViewModel定义 #

首先补全你的TypeScript模型，确保文件相关字段能正确承载文件对象：

export class FileItemRequestViewModel {
  public FileName: string;
  public FileContent: File; // 用File类型直接存储选中的文件
  public ContentType: string; // 可选，记录文件MIME类型
}

export class MainRequestViewModel {
  public FirstName: string;
  public LastName: string;
  public Comments: string;
  public FilesToUpload: Array<FileItemRequestViewModel>;
}

2. 构建表单并收集数据 #

用Angular响应式表单来管理输入和文件选择，这样能更便捷地处理表单状态：

// file-upload.component.ts
import { Component } from '@angular/core';
import { FormBuilder, FormGroup, FormArray } from '@angular/forms';
import { HttpClient } from '@angular/common/http';

@Component({
  selector: 'app-file-upload',
  templateUrl: './file-upload.component.html'
})
export class FileUploadComponent {
  uploadForm: FormGroup;

  constructor(private fb: FormBuilder, private http: HttpClient) {
    // 初始化表单结构
    this.uploadForm = this.fb.group({
      firstName: [''],
      lastName: [''],
      comments: [''],
      filesToUpload: this.fb.array([]) // 用FormArray存储多个文件条目
    });
  }

  // 获取文件表单数组的快捷方式
  get filesToUpload(): FormArray {
    return this.uploadForm.get('filesToUpload') as FormArray;
  }

  // 处理文件选择事件
  onFileChange(event: Event) {
    const input = event.target as HTMLInputElement;
    const files = input.files;
    if (files?.length) {
      // 遍历选中的文件，添加到FormArray中
      Array.from(files).forEach(file => {
        this.filesToUpload.push(this.fb.group({
          fileName: file.name,
          fileContent: file,
          contentType: file.type
        }));
      });
    }
  }

  // 提交表单到WebApi
  async onSubmit() {
    if (!this.uploadForm.valid) return;

    // 构建FormData——这是上传文件的标准方式
    const formData = new FormData();
    // 添加普通文本字段
    formData.append('FirstName', this.uploadForm.get('firstName')?.value);
    formData.append('LastName', this.uploadForm.get('lastName')?.value);
    formData.append('Comments', this.uploadForm.get('comments')?.value);

    // 循环添加文件列表，注意要用索引格式让.NET能正确绑定到数组
    this.filesToUpload.controls.forEach((control, index) => {
      const fileItem = control.value;
      formData.append(`FilesToUpload[${index}].FileName`, fileItem.fileName);
      formData.append(`FilesToUpload[${index}].FileContent`, fileItem.fileContent);
      formData.append(`FilesToUpload[${index}].ContentType`, fileItem.contentType);
    });

    // 发送POST请求，注意不要手动设置Content-Type，浏览器会自动处理multipart/form-data
    this.http.post('/api/upload', formData).subscribe({
      next: res => console.log('上传成功！', res),
      error: err => console.error('上传失败：', err)
    });
  }
}

对应的模板文件：

<!-- file-upload.component.html -->
<form [formGroup]="uploadForm" (ngSubmit)="onSubmit()" class="upload-form">
  <div class="form-group">
    <label>First Name</label>
    <input type="text" formControlName="firstName" required>
  </div>
  <div class="form-group">
    <label>Last Name</label>
    <input type="text" formControlName="lastName" required>
  </div>
  <div class="form-group">
    <label>Comments</label>
    <textarea formControlName="comments"></textarea>
  </div>
  <div class="form-group">
    <label>Select Files</label>
    <input type="file" multiple (change)="onFileChange($event)" required>
  </div>
  <button type="submit" [disabled]="!uploadForm.valid">Submit</button>
</form>

二、.NET WebApi服务端实现 #

1. 定义匹配的ViewModel #

在WebApi项目中创建对应的C#模型，用IFormFile来接收上传的文件（这是ASP.NET Core的标准做法）：

// ViewModels/MainRequestViewModel.cs
public class MainRequestViewModel
{
    public string FirstName { get; set; }
    public string LastName { get; set; }
    public string Comments { get; set; }
    public List<FileItemRequestViewModel> FilesToUpload { get; set; } = new List<FileItemRequestViewModel>();
}

public class FileItemRequestViewModel
{
    public string FileName { get; set; }
    public IFormFile FileContent { get; set; } // 自动绑定上传的文件
    public string ContentType { get; set; }
}

2. 编写Api控制器 #

创建一个控制器来处理上传请求，验证模型并处理文件：

// Controllers/UploadController.cs
using Microsoft.AspNetCore.Http;
using Microsoft.AspNetCore.Mvc;
using System.IO;
using System.Threading.Tasks;

[ApiController]
[Route("api/[controller]")]
public class UploadController : ControllerBase
{
    [HttpPost]
    public async Task<IActionResult> Post(MainRequestViewModel model)
    {
        // 验证模型有效性
        if (!ModelState.IsValid)
        {
            return BadRequest(ModelState);
        }

        // 处理普通文本字段（示例：打印到控制台）
        System.Console.WriteLine($"Received: {model.FirstName} {model.LastName}, Comments: {model.Comments}");

        // 处理上传的文件
        foreach (var fileItem in model.FilesToUpload)
        {
            if (fileItem.FileContent != null && fileItem.FileContent.Length > 0)
            {
                // 示例：保存文件到服务器的uploads目录
                var uploadsDir = Path.Combine(Directory.GetCurrentDirectory(), "uploads");
                if (!Directory.Exists(uploadsDir))
                {
                    Directory.CreateDirectory(uploadsDir);
                }

                var filePath = Path.Combine(uploadsDir, fileItem.FileName);
                using (var stream = new FileStream(filePath, FileMode.Create))
                {
                    await fileItem.FileContent.CopyToAsync(stream);
                }
            }
        }

        return Ok(new { Message = "文件上传成功！", TotalFiles = model.FilesToUpload.Count });
    }
}

三、关键注意事项 #

1. 不要手动设置Content-Type：当用FormData发送请求时，浏览器会自动生成multipart/form-data类型并包含正确的边界值，手动设置会导致绑定失败。
2. FormArray的索引格式：在添加文件到FormData时，用FilesToUpload[${index}].XXX的格式，这样.NET模型绑定器才能正确识别数组。
3. 小文件备选方案：如果你的文件很小（比如几KB），也可以把文件转成Base64字符串用JSON发送，但这种方式会增加约33%的体积，不推荐大文件使用。

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