FormData 追加嵌套对象

Question

是否可以将嵌套对象附加到FormData?

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

$.each(data, function(key, value) {
    formData.append(key, value);
});

服务器控制台- console.log(req.body)

{
    title: 'title',
    text: 'text',
    preview: '[object Object]'
}

我怎样才能得到 的确切值preview: {p_title:'p title', p_text: 'p text'}？

Answer 1

首先，我为我糟糕的英语道歉。

我做了一些事情来在服务器端正确获取数据，而不是在写入控制台时。我希望你愿意这样做。

我必须编写一个 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']
});

现在让我们发送用ajax转换的FormData。

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

    console.log(response);

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

当我用 PHP 将数据压到屏幕上时，我得到了我想要的确切结果。方法是 POST 还是 GET 并不重要。

响应.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
        )

)

希望它对您的业务有利。

Answer 2

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.log(val[0]+ ', ' + val[1]); 
}

Answer 3

要将对象附加到 formData，您需要先对其进行字符串化，如下所示：

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

然后在服务器端访问它，您需要首先使用JSON.parse(). 希望能帮助到你！

Answer 4

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

Answer 5

这里有一个“A方便的JavaScript函数，将对象转换为FormData实例” github，也可以作为npm包提供，使用非常简单

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

var formData = objectToFormData(data);

Answer 6

这对我来说是要做的工作：

用于.分隔键和子键

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