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（要求正文）

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

如何获取preview: {p_title:'p title', p_text: 'p text'}的确切值？

Answer 1

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

控制台formData

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

Answer 2

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 3

这是我的工作：

使用.分隔键和子键

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 4

尝试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 5

这里是“将对象转换为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 6

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

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

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

Answer 7

使用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 8

首先，我为我的英语不好而道歉。

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

我必须编写一个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 9

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

FormData追加嵌套对象

9 个答案: