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 都没有关系。

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
        )

)

希望它有利于您的业务。

Answer 2

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

Answer 3

您不需要使用任何第三方模块，如果您有嵌套对象，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

Answer 4

这为我做的工作：

使用.分隔键和子键

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

Answer 5

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

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

然后在服务器端访问它，你需要先使用JSON.parse() 解析它。 希望对您有所帮助！

Answer 6

试试object-to-formdata。这是一个方便的 JavaScript 函数，可以将 Objects 转换为 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.log(formData);

Answer 7

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 8

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

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

var formData = objectToFormData(data);

Answer 9

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