更新方法：

截至 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和rloth指出这一点！

旧答案：

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

我也刚刚发现这个问题说明了同样的事情：FormData.append("key", "value") is not working。

解决此问题的一种方法是构建一个常规字典，然后将其转换为 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);

几个简短的回答

[...fd] // shortest devtool solution
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

更长的答案

其他人建议记录每个entry of fd.entries()，但console.log也可以采用多个参数
console.log(foo, bar, ...)
要采用任意数量的参数，您可以使用该apply方法并将其调用如下：console.log.apply(console, array)。
但是有一种新的 ES6 方法可以使用扩展运算符和迭代器来应用参数
console.log(...array)。

知道这一点，并且事实上FormData和数组都在它的原型中有一个Symbol.iterator方法，它指定了默认的for...of循环，然后你就可以散布参数，...iterable而不必去调用formData.entries()方法（因为是默认功能）for (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)

// Don't work in IE (use last pair if same key is used more)
console.log(Object.fromEntries(fd))

如果您想检查原始正文的外观，则可以使用Response 构造函数（fetch API 的一部分），这会将您的 formdata 转换为上传 formdata 时的实际外观

var fd = new FormData()

fd.append('key1', 'value1')
fd.append('key2', 'value2')

new Response(fd).text().then(console.log)

我用的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()与更广泛的浏览器支持，但他们只带来了value，而不是重点。查看链接了解更多信息。

ES6+解决方案：

查看表单数据的结构：

console.log([...formData])

查看每个键值对：

for (let [key, value] of formData.entries()) {
  console.log(`${key}: ${value}`);
}

角

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

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

不是：当我在 Angular 5（使用 TypeScript 2.4.2）上工作时，我像上面一样尝试过，它可以工作，除了静态检查错误，但也 for(var pair of formData.entries())不起作用。

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

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

在 Stackblitz 查看