简单的方法

我在angular 8中使用了这段代码

var formData = new FormData();
formData.append('key1', 'value1');
formData.append('key2', 'value2');

 formData.forEach((value,key) => {
    console.log(key+value)
     });

我使用formData.entries()方法。我不确定是否所有浏览器都支持，但它在Firefox上运行良好。

摘自https://developer.mozilla.org/en-US/docs/Web/API/FormData/entries

// Create a test FormData object
var formData = new FormData();
formData.append('key1','value1');
formData.append('key2','value2');

// Display the key/value pairs
for (var pair of formData.entries())
{
 console.log(pair[0]+ ', '+ pair[1]); 
}

还有更广泛的浏览器支持的formData.get()和formData.getAll()，但它们只显示值而不显示键。更多信息请参见链接。

简单的方法

我在angular 8中使用了这段代码

var formData = new FormData();
formData.append('key1', 'value1');
formData.append('key2', 'value2');

 formData.forEach((value,key) => {
    console.log(key+value)
     });

下面是一个将FormData对象的条目作为对象记录到控制台的函数。

export const logFormData = (formData) => {
    const entries = formData.entries();
    const result = {};
    let next;
    let pair;
    while ((next = entries.next()) && next.done === false) {
        pair = next.value;
        result[pair[0]] = pair[1];
    }
    console.log(result);
};

.entries()上的MDN文档

MDN文档。next()和。done

简短的回答

[...fd] // shortest devtool solution
Array.from(fd) // Same as above
console.log(...fd) // shortest script solution
console.log([...fd]) // Think 2D array makes it more readable
console.table([...fd]) // could use console.table if you like that
console.log(Object.fromEntries(fd)) // Works if all fields are uniq
console.table(Object.fromEntries(fd)) // another representation in table form
new Response(fd).text().then(console.log) // To see the entire raw body

再回答

其他人建议记录fd.entries()的每个条目，但是console.log也可以接受多个参数。要获取任意数量的参数，可以使用apply方法并像这样调用它:console.log。应用(控制台、数组)。 但是ES6有一种新的方法来应用扩展操作符和iteratorconsole.log(…array)参数。

知道这一点，事实上，FormData和数组都有一个符号。迭代器方法，该方法指定了…的循环，然后你可以用…展开参数iterable而不必去调用formData.entries()方法(因为这是默认函数)，你可以只做(x of formData)，如果你喜欢这样

var fd = new FormData() fd.append('key1', 'value1') fd.append('key2', 'value2') fd.append('key2', 'value3') // using it's default for...of specified by Symbol.iterator // Same as calling `fd.entries()` for (let [key, value] of fd) { console.log(`${key}: ${value}`) } // also using it's default for...of specified by Symbol.iterator console.log(...fd) // Only shows up in devtool (not here in this code snippet) console.table([...fd]) // Don't work in IE (use last pair if same key is used more) console.log(Object.fromEntries(fd))

如果你想检查原始的主体看起来像什么，然后你可以使用响应构造函数(获取API的一部分)，这将转换你的表单数据，它实际上看起来像当你上传表单数据

var fd = new FormData() fd。追加(“key1”、“value1”) fd。追加(“key2”、“value2”) 新的响应(fd)。text () (console.log)

更新方法:

截至2016年3月，最新版本的Chrome和Firefox现在支持使用FormData.entries()来检查FormData。源。

// Create a test FormData object
var formData = new FormData();
formData.append('key1', 'value1');
formData.append('key2', 'value2');

// Display the key/value pairs
for (var pair of formData.entries()) {
    console.log(pair[0]+ ', ' + pair[1]); 
}

感谢Ghost Echo和loth指出这一点!

旧的回答:

在阅读了这些Mozilla文章之后，似乎没有办法从FormData对象中获取数据。您只能使用它们来构建通过AJAX请求发送的FormData。

我还发现了这个问题，说明了同样的事情:FormData。Append ("key"， "value")无效。

解决这个问题的一种方法是建立一个常规字典，然后将其转换为FormData:

var myFormData = {
    key1: 300,
    key2: 'hello world'
};

var fd = new FormData();
for (var key in myFormData) {
    console.log(key, myFormData[key]);
    fd.append(key, myFormData[key]);
}

如果你想调试一个普通的FormData对象，你也可以发送它，以便在网络请求控制台检查它:

var xhr = new XMLHttpRequest;
xhr.open('POST', '/', true);
xhr.send(fd);