时间戳

首页 > 解决方案 > 角度同时从 formData 和 formGroup 发送数据

node.js - 角度同时从 formData 和 formGroup 发送数据

问题描述

是否可以发送带有反应形式的文件（模型驱动）？文件来自formData，另一个数据来自FormGroup，如何将其组合并发送到 nodejs？

从以下位置获取文件：

<input formControlName="name" class="form-control" type="text">
<input formControlName="surname" class="form-control" type="text">
<input formControlName="email" class="form-control" type="mail">
<input type="file"(change)="addPhoto($event)" />

创建FormControl和FormGroup

createFormControls() {
  this.name = new FormControl("", Validators.required);
  this.surname = new FormControl("", Validators.required);
  this.email = new FormControl();
  this.file = new FormControl("");
}

createForm() {
  this.userData = new FormGroup({
    name: this.name,
    surname: this.surname,
    email: this.email,
    file: this.file
  });
}

推送数据

addPhoto(event) {
let target = event.target || event.srcElement;
this.files.push(target.files);
}

向节点js发送数据

onSubmit() {
  if (this.userData.valid) {
  let filelist: FileList = this.files;
  const formData = new FormData();
  for (let i = 0; i < filelist.length; i++) {
    this.readyFile = filelist[i];
    formData.append('file', this.readyFile[0]);
  }
   // Here I have a main problem - there are "formData" and 
   // "this.userData.value" how send it to together(concat) ?

    this.apiService.updateUserData(--?--)
  }
}

标签： node.jsangularangular-reactive-forms

解决方案

您可以为要发送的每个 FormControl 执行新的 formData.append()。

formData.append('name', this.name.value)
formData.append('surname', this.surname.value)
formData.append('email', this.email.value)
formData.append('file', this.file.value)

我对这个解决方案并不满意，但这是我找到的唯一解决方案。希望它可以帮助！

推荐阅读