FormData добавляет вложенный объект

Значения FormData автоматически преобразуются в string. Вы можете попробовать сделать это с помощью Blob.

Или просто поместите его как строку, используя JSON.stringify(obj).

$.each(data, function(key, value){
    if (typeof(value) === 'object') {
        value = new Blob([JSON.stringify(value)], {type : 'application/json'});// or just JSON.stringify(value)
    }
    formData.append(key, value);
});

Вот «Удобная функция JavaScript, преобразующая объект в экземпляр FormData» github, также доступная как пакет npm, очень простая в использовании.

let data = {
    title: 'title',
    text: 'text',
    preview: {p_title:'p title', p_text: 'p text'}
};

var formData = objectToFormData(data);

Чтобы добавить объект в formData, вам нужно сначала преобразовать его в строку, например:

let objToAppend= {
  key1: value1,
  key2: value2,
}
let formData = new FormData();
formData.append('obj', JSON.stringify(objToAppend));

Затем на стороне сервера, чтобы получить к нему доступ, вам нужно сначала проанализировать его с помощью JSON.parse(). Надеюсь, это поможет!

let formData = new FormData();
let data = {
  title: 'title',
  text: 'text',
  preview: {p_title:'p title', p_text: 'p text'}
};

for(let dataKey in data) {
  if (dataKey === 'preview') {
    // append nested object
    for (let previewKey in data[dataKey]) {
      formData.append(`preview[${previewKey}]`, data[dataKey][previewKey]);
    }
  }
  else {
    formData.append(dataKey, data[dataKey]);
  }
}

Форма консолиДанные

for (let val of formData.entries()) {
  console.info(val[0]+ ', ' + val[1]); 
}

Попробуйте данные от объекта к форме. Это удобная функция JavaScript, преобразующая объекты в экземпляры FormData.

import { objectToFormData } from 'object-to-formdata';

const object = {
  /**
   * key-value mapping
   * values can be primitives or objects
   */
};

const options = {
  /**
   * include array indices in FormData keys
   * defaults to false
   */
  indices: false,

  /**
   * treat null values like undefined values and ignore them
   * defaults to false
   */
  nullsAsUndefineds: false,

  /**
   * convert true or false to 1 or 0 respectively
   * defaults to false
   */
  booleansAsIntegers: false,
};

const formData = objectToFormData(
  object,
  options, // optional
  existingFormData, // optional
  keyPrefix, // optional
);

console.info(formData);

Это для меня делает работу:

используйте . для разделения ключа и subKey

let formData = new FormData();
let data = {
  title: 'title',
  text: 'text',
  preview: {p_title:'p title', p_text: 'p text'}
};

for(let key in data) {
  if (typeof(data[key]) === 'object') {
    for (let subKey in data[key]) {
      formData.append(`${key}.${subKey}`, data[key][subKey]);
    }
  }
  else {
    formData.append(key, data[key]);
  }
}

Вам не нужно использовать какие-либо сторонние модули, и JSON.stringify() не идеален, если у вас есть вложенные объекты. Вместо этого вы можете использовать Object.entries().

// If this is the object you want to convert to FormData...
const item = {
    description: 'First item',
    price: 13,
    photo: File
};

const formData = new FormData();

Object.entries(item).forEach(([key, value]) => {
    formData.append(key, value);
});

// At this point, you can then pass formData to your handler method

Узнайте больше о Object.entries() здесь - https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/entries

используйте hashName [keyName]

let formData = new FormData();
let data = {
  title: 'title',
  text: 'text',
  preview: {p_title:'p title', p_text: 'p text'}
};

for(let key in data) {
  if (typeof(data[key]) === 'object') {
    for (let subKey in data[key]) {
      formData.append('${key}[${subKey}]', data[key][subKey]);
    }
  }
  else {
    formData.append(key, data[key]);
  }
}

Прежде всего, прошу прощения за плохой английский.

Я что-то сделал для правильного получения данных на стороне сервера, а не когда писал в консоль. Я надеюсь, ты хочешь это сделать.

Мне пришлось написать функцию javascript, чтобы получать вложенные данные на стороне клиента на стороне сервера.

Для этого я написал функцию obj2FormData (). Квадратные скобки вроде работают.

function obj2FormData(obj, formData = new FormData()){

    this.formData = formData;

    this.createFormData = function(obj, subKeyStr = ''){
        for(let i in obj){
            let value          = obj[i];
            let subKeyStrTrans = subKeyStr ? subKeyStr + '[' + i + ']' : i;

            if (typeof(value) === 'string' || typeof(value) === 'number'){

                this.formData.append(subKeyStrTrans, value);

            } else if (typeof(value) === 'object'){

                this.createFormData(value, subKeyStrTrans);

            }
        }
    }

    this.createFormData(obj);

    return this.formData;
}

При отправке данных с помощью Ajax мы конвертируем вложенный объект в объект FormData.

let formData = obj2FormData({
    name : 'Emrah',
    surname : 'Tuncel',
    birth: 1983,
    child : {
        name: 'Eylul',
        surname: 'Tuncel',
        toys: ['ball', 'baby']
    },
    color: ['red', 'yellow']
});

Теперь давайте отправим данные FormData, которые мы преобразовали с помощью ajax.

const xhr = new XMLHttpRequest();
xhr.addEventListener('load', response => {
    //AJAX RESPONSE >>

    console.info(response);

    //AJAX RESPONSE //
});
xhr.open('POST','response.php');
xhr.send(formData);

Когда я нажал данные на экране с помощью PHP, я получил именно тот результат, который хотел. Не имеет значения, какой это метод - POST или GET.

response.php

<pre><? print_r($_GET) ?></pre>
<pre><? print_r($_POST) ?></pre>

Результат был следующим.

Array
(
    [name] => Emrah
    [surname] => Tuncel
    [birth] => 1983
    [child] => Array
        (
            [name] => Eylul
            [surname] => Tuncel
            [toys] => Array
                (
                    [0] => ball
                    [1] => baby
                )

        )

    [color] => Array
        (
            [0] => red
            [1] => yellow
        )

)

Надеюсь, это принесет пользу вашему бизнесу.