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

Question

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

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

Answer 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));
    }

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

I want to submit a reactive form with multiple images file included

file-upload

form-data

angular

angular-reactive-forms