如何在ng2-file-upload的onBeforeUploadItem中通过FormData传递表单输入值

没问题！要在ng2-file-upload的onBeforeUploadItem钩子中把表单输入值通过FormData传递给后端，其实只需要在这个钩子里往上传项的formData对象里追加字段就行，我给你补全代码并解释清楚：

步骤1：定义表单相关属性（模板驱动表单示例） #

首先在你的组件类里，先定义好需要传递的表单字段变量：

import { Component, OnInit } from '@angular/core';
import { FileUploader } from 'ng2-file-upload/ng2-file-upload';

const URL = 'http://localhost:4200/api/ticketsystem/createticket';

@Component({
  // 组件元数据
})
export class YourComponent implements OnInit {
  public uploader: FileUploader = new FileUploader({ url: URL, itemAlias: 'file' });
  // 定义表单输入对应的变量
  public ticketTitle: string;
  public ticketDescription: string;

  constructor() {
    this.uploader.onAfterAddingFile = (file) => { 
      file.withCredentials = false; 
    };
  }

  ngOnInit(){
    // 你已有的上传完成回调
    this.uploader.onCompleteItem = (item: any, response: any, status: any, headers: any) => {
      console.log("ImageUpload:uploaded:", item, status, response);
    };

    // 配置onBeforeUploadItem钩子，添加表单数据
    this.uploader.onBeforeUploadItem = (item: any) => {
      // 向当前上传项的FormData中追加表单字段
      item.formData.append('title', this.ticketTitle);
      item.formData.append('description', this.ticketDescription);
      // 如果还有其他表单字段，继续用append添加即可
    };
  }
}

步骤2：模板中绑定表单输入 #

在组件模板里，把表单输入和我们定义的变量做双向绑定：

<!-- 表单输入区域 -->
<input type="text" [(ngModel)]="ticketTitle" placeholder="请输入工单标题" />
<textarea [(ngModel)]="ticketDescription" placeholder="请输入工单描述"></textarea>

<!-- 文件上传控件 -->
<input type="file" ng2FileSelect [uploader]="uploader" />
<button (click)="uploader.uploadAll()">上传文件及表单数据</button>

响应式表单的适配方案（可选） #

如果你用的是Angular响应式表单，也可以从表单组中取值：

import { FormGroup, FormControl } from '@angular/forms';

// 组件类中定义表单组
public ticketForm: FormGroup;

ngOnInit() {
  this.ticketForm = new FormGroup({
    title: new FormControl(''),
    description: new FormControl('')
  });

  this.uploader.onBeforeUploadItem = (item: any) => {
    const formValues = this.ticketForm.value;
    item.formData.append('title', formValues.title);
    item.formData.append('description', formValues.description);
  };
}

对应的模板写法：

<form [formGroup]="ticketForm">
  <input type="text" formControlName="title" placeholder="请输入工单标题" />
  <textarea formControlName="description" placeholder="请输入工单描述"></textarea>
</form>

原理说明 #

onBeforeUploadItem钩子会在每个文件开始上传前触发，此时我们可以直接修改当前上传项的formData属性——ng2-file-upload内部会自动把这个FormData和文件一起发送到后端，后端就能同时接收到文件和你追加的表单字段了。

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