如何发送带有对象数组的嵌套对象，包括FormData中的文件？答案

【问题标题】：How to send nested object with array of objects including files in FormData?如何发送带有对象数组的嵌套对象，包括FormData中的文件？
【发布时间】：2021-07-19 04:36:41
【问题描述】：

我有一个嵌套对象，其中一些值是对象数组。这些对象有一个字段作为文件。这是对象结构。

{
  "shop_name":"Organic Farm Shop",
  "shop_logo": File,
  "description":"Lorem ipsum dolor sit amet consectetur adipisicing elit. ",
  "category":"Grocery",
  "shop_url":"organic-farm",
  "product_details":[
    {
      "product_name":"Fresh Carrots",
      "product_image": File,
      "price":45,
      "stock":10,
      "unit":"Kg",
      "catogoryName":"Frozen Foodss"
    },
    {
      "product_name":"Fresh Cucumbers",
      "product_image": File,
      "price":80,
      "stock":20,
      "unit":"Kg",
      "catogoryName":"Frozen Foodss"
    }
  ],
  "page_input":[
    {
      "inputLabel":"Address",
      "inputType":"multiline_text"
    },
    {
      "inputLabel":"Mobile Number",
      "inputType":"numbers"
    }
  ]
}

如何将其附加到 FormData？或者有没有更好的方法在不使用 FormData 的情况下做到这一点？

【问题讨论】：

标签： javascript ajax javascript-objects form-data

【解决方案1】：

你应该先把它字符串化：

var expressiveObjectVariableName = JSON.stringify(expressiveObjectName);

然后通常附加它。

form.append('expressiveFieldName', expressiveObjectVariableName );

More info

编辑：

对于嵌套对象、数组和文件，描述的问题，试试这个：

JavaScript 版本

function toFormData(obj, form, namespace) {
    let fd = form || new FormData();
    let formKey;
  
  for(let property in obj) {
    if(obj.hasOwnProperty(property) && obj[property]) {
      if (namespace) {
        formKey = namespace + '[' + property + ']';
      } else {
        formKey = property;
      }
     
      // if the property is an object, but not a File, use recursivity.
      if (obj[property] instanceof Date) {
        fd.append(formKey, obj[property].toISOString());
      }
      else if (typeof obj[property] === 'object' && !(obj[property] instanceof File)) {
        toFormData(obj[property], fd, formKey);
      } else { // if it's a string or a File object
        fd.append(formKey, obj[property]);
      }
    }
  }
  
  return fd;
}

TypeScript 版本

function createFormData(object: Object, form?: FormData, namespace?: string): FormData {
    const formData = form || new FormData();
    for (let property in object) {
        if (!object.hasOwnProperty(property) || !object[property]) {
            continue;
        }
        const formKey = namespace ? `${namespace}[${property}]` : property;
        if (object[property] instanceof Date) {
            formData.append(formKey, object[property].toISOString());
        } else if (typeof object[property] === 'object' && !(object[property] instanceof File)) {
            createFormData(object[property], formData, formKey);
        } else {
            formData.append(formKey, object[property]);
        }
    }
    return formData;
}

【讨论】：