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

Posted 2023-03-22

【中文标题】我想提交一个包含多个图像文件的反应式表单

【英文标题】：I want to submit a reactive form with multiple images file included

【发布时间】：2021-12-20 00:32:58

【问题描述】：

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

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

【参考方案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));