如何将NG ZORRO Upload组件与FormGroup结合使用

核心思路 #

要实现这个需求，关键是禁用Upload组件的自动上传行为，将文件选择后的控制权拿到自己手里，再把文件对象存入FormGroup/FormArray，最后和其他表单数据一起通过FormData提交到服务器。

具体实现步骤 #

1. 配置Upload组件，禁用自动上传 #

设置nzAutoUpload="false"关闭自动上传，同时给nzAction填一个占位值（比如"#"），因为组件要求必填但不会实际使用这个地址。通过nzChange事件监听文件选择/移除的变化，彻底接管文件处理逻辑。

模板示例：

<form [formGroup]="submitForm" (ngSubmit)="onSubmit()">
  <!-- 普通表单控件 -->
  <input formControlName="username" nz-input placeholder="用户名">

  <!-- 单文件上传 -->
  <nz-upload
    nzAction="#"
    nzAutoUpload="false"
    [nzFileList]="singleFileList"
    (nzChange)="handleSingleFileChange($event)"
    nzSingleFile
  >
    <button nz-button><i nz-icon nzType="upload"></i> 选择单文件</button>
  </nz-upload>

  <!-- 多文件上传 -->
  <nz-upload
    nzAction="#"
    nzAutoUpload="false"
    [nzFileList]="multiFileList"
    (nzChange)="handleMultiFileChange($event)"
  >
    <button nz-button><i nz-icon nzType="upload"></i> 选择多文件</button>
  </nz-upload>

  <button nz-button type="submit" nzType="primary">提交所有数据</button>
</form>

2. 初始化FormGroup/FormArray #

在组件类中创建对应表单结构，单文件用FormControl存储，多文件用FormArray管理：

import { Component } from '@angular/core';
import { FormBuilder, FormGroup, FormArray } from '@angular/forms';
import { UploadFile } from 'ng-zorro-antd/upload';

@Component({
  selector: 'app-upload-form',
  templateUrl: './upload-form.component.html'
})
export class UploadFormComponent {
  submitForm: FormGroup;
  singleFileList: UploadFile[] = [];
  multiFileList: UploadFile[] = [];

  constructor(private fb: FormBuilder) {
    this.submitForm = this.fb.group({
      username: [''],
      singleFile: [null], // 存储单个原生File对象
      multiFiles: this.fb.array([]) // 存储多个原生File对象数组
    });
  }

  // 快捷获取多文件FormArray
  get multiFiles(): FormArray {
    return this.submitForm.get('multiFiles') as FormArray;
  }
}

3. 同步文件选择状态到表单控件 #

在nzChange回调中，将选中的文件对象存入对应表单控件，移除文件时同步清空或删除对应项：

// 单文件处理逻辑
handleSingleFileChange(event: { file: UploadFile; fileList: UploadFile[] }): void {
  this.singleFileList = event.fileList;
  // 取最后一个选中的文件（开启nzSingleFile后仅保留一个）
  const targetFile = event.fileList.length > 0 ? event.fileList[0].originFileObj : null;
  this.submitForm.get('singleFile')?.setValue(targetFile);
}

// 多文件处理逻辑
handleMultiFileChange(event: { file: UploadFile; fileList: UploadFile[] }): void {
  this.multiFileList = event.fileList;
  // 清空现有FormArray后重新添加所有有效文件
  this.multiFiles.clear();
  event.fileList.forEach(file => {
    if (file.originFileObj) {
      this.multiFiles.push(this.fb.control(file.originFileObj));
    }
  });
}

4. 统一提交表单数据 #

提交时将表单中的普通字段和文件一起存入FormData，再发送请求：

onSubmit(): void {
  if (this.submitForm.invalid) {
    // 此处可添加表单校验提示逻辑
    return;
  }

  const formData = new FormData();
  // 添加普通表单字段
  formData.append('username', this.submitForm.get('username')?.value);

  // 添加单文件
  const singleFile = this.submitForm.get('singleFile')?.value;
  if (singleFile) {
    formData.append('singleFile', singleFile);
  }

  // 添加多文件
  const fileList = this.multiFiles.controls.map(ctrl => ctrl.value);
  fileList.forEach((file, index) => {
    formData.append(`multiFiles[${index}]`, file);
  });

  // 替换为你的实际接口地址和请求逻辑
  // this.http.post('/api/submit-all', formData).subscribe(res => {
  //   // 处理响应
  // });
  console.log('待提交的FormData:', formData);
}

关键注意点 #

• nzAction仅需填占位值（如"#"），因为已禁用自动上传，组件不会发起该地址的请求。
• 必须使用UploadFile的originFileObj属性获取浏览器原生File对象，才能存入FormData进行上传。
• 多文件场景用FormArray管理，便于批量处理和表单校验。

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