我想提交一个包含多个图像文件的反应式表单答案

【问题标题】：I want to submit a reactive form with multiple images file included我想提交一个包含多个图像文件的反应式表单
【发布时间】：2024-04-21 22:50:02
【问题描述】：

我想提交一个包含多个图像的表单，但我无法在表单数据中附加文件格式的图像数组。我为产品输入创建了一个反应式表单，它将获取一些产品信息和多个文件格式的图像。我从表单中获取所有值，但无法在图像键中附加图像数组。到目前为止我在提交方法中所做的

onSubmit() {
    let itemData = this.itemEntryForm.value;
    const formData = new FormData();
    for (const propertyKey of Object.keys(itemData)) {
      if (propertyKey != 'image') {
        formData.append(propertyKey, itemData[propertyKey]);
      } else if (propertyKey == 'image') {
        for (let i = 0; i < itemData[propertyKey].length; i++) {
          formData.append('image', itemData['image'][i]);
        }
      }
    }
    //for console formdata
    formData.forEach((value, key) => {
      console.log(key + '--' + value);
    });
  }
}

我需要将图像数组存储在图像键中。 stackblitz Code Example

【问题讨论】：

标签： angular file-upload angular-reactive-forms form-data

【解决方案1】：

形成你的 else if 块，我们将一个变量初始化为一个空数组来存储所有图像，以便我们可以在循环完成后将其附加到 image。但是，我不认为图像数组可以附加到 formData 因此 JSON.stringify()

    else if (propertyKey == 'image') {
    const imageList = [];
    for (let i = 0; i < itemData[propertyKey].length; i++) {
       imageList.push(itemData['image'][i]);
    }
      formData.append('image', JSON.stringify(imageList));
    }

【讨论】：