FormData.append("key", "value") is not working

你能告诉我这个有什么问题吗:

var formdata = new FormData();
formdata.append("key", "value");
console.log(formdata);

我的输出看起来像这样，我不能找到我的“键”-“值”对

FormData
*__proto__: FormData
**append: function append() { [native code] }
***arguments: null
***caller: null
***length: 0
***name: "append"
***prototype: append
***__proto__: function Empty() {}
*constructor: function FormData() { [native code] }
**arguments: null
**caller: null
**length: 0
**name: "FormData"
**prototype: FormData
**toString: function toString() { [native code] }
*__proto__: Object
**__proto__: Object
**__defineGetter__: function __defineGetter__() { [native code] }
**__defineSetter__: function __defineSetter__() { [native code] }
**__lookupGetter__: function __lookupGetter__() { [native code] }
**__lookupSetter__: function __lookupSetter__() { [native code] }
**constructor: function Object() { [native code] }
**hasOwnProperty: function hasOwnProperty() { [native code] }
**isPrototypeOf: function isPrototypeOf() { [native code] }
**propertyIsEnumerable: function propertyIsEnumerable() { [native code] }
**toLocaleString: function toLocaleString() { [native code] }
**toString: function toString() { [native code] }
**valueOf: function valueOf() { [native code] }

我不明白！昨天它工作得很好，今天我的头撞击键盘很多次！Firefox，Chrome，都是一样的:/

229852 次浏览
小开

你说它不起作用，你期待会发生什么？

There's no way of getting the data out of a FormData object; it's just intended for you to use to send data along with an XMLHttpRequest object (for the send method).

将近五年后更新: 在一些较新的浏览器中，这种情况已经不复存在，现在您可以看到提供给 FormData的数据，而不仅仅是将数据塞入其中。看看公认的答案了解更多信息。

小开
最佳答案

Chrome50 + 和 Firefox39 + 中的新功能(44岁以上) :

  • formdata.entries()(与 Array.from()结合以便调试)
  • formdata.get(key)
  • 以及更多非常有用的方法

原答案:

我通常做的“调试”FormData对象，只是发送它(任何地方!)并检查浏览器日志(例如:。Chrome devtools 的 Network 选项卡)。

你不需要相同的 Ajax 框架，也不需要任何细节，只需要发送:

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

放松。

小开

你可能和我最初遇到的问题一样。我试图使用 FormData 获取所有输入文件来上传图像，但同时我想在传递给服务器的信息中附加一个会话 ID。一直以来，我认为通过添加信息，您可以通过访问对象在服务器中看到它。我错了。在向 FormData 追加信息时，检查服务器上追加信息的方法是使用简单的 $_POST['*your appended data*']查询。像这样:

约翰逊:

$('form').submit(function(){
var sessionID = 8;
var formData = new FormData(this);
formData.append('id', sessionID);


$.ajax({
url: "yoururl.php",
data: formData,
processData: false,
contentType: false,
type: 'POST',
success: function(data){
alert(data);
}
});
});

然后是 php:

$sessionID = $_POST['id'];
$files = $_FILES['image'];


$foreach ($files as $key=>val){
//...
}
小开

如果你使用的是 Chrome 浏览器，你可以查看邮件数据

这里是如何检查邮件数据

  1. 进入网络标签
  2. 查找要发送邮件数据的链接
  3. 点击它
  4. 在 Header 中，可以检查 RequestPayload 以检查发布数据

Chrome's DevTools

小开

你可以看到 你需要使用 console.log(formData.getAll('your key')); 小心 Https://developer.mozilla.org/en-us/docs/web/api/formdata/getall

小开

以我在 Edge 浏览器上的情况来说:

  const formData = new FormData(this.form);
for (const [key, value] of formData.entries()) {
formObject[key] = value;
}

给我同样的错误

所以我没有使用 FormData，我只是手动构建一个对象

import React from 'react';
import formDataToObject from 'form-data-to-object';


...


let formObject = {};


// EDGE compatibility -  replace FormData by
for (let i = 0; i < this.form.length; i++) {
if (this.form[i].name) {
formObject[this.form[i].name] = this.form[i].value;
}
}


const data = formDataToObject.toObj(formObject): // convert "user[email]":"customer@mail.com" => "user":{"email":"customer@mail.com"}


const orderRes = await fetch(`/api/orders`, {
method: 'POST',
credentials: 'same-origin',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify(data)
});


const order = await orderRes.json();
小开

反应版本

确保有一个带有 'content-type': 'multipart/form-data'的头

_handleSubmit(e) {
e.preventDefault();
const formData = new FormData();
formData.append('file', this.state.file);
const config = {
headers: {
'content-type': 'multipart/form-data'
}
}


axios.post("/upload", formData, config)
.then((resp) => {
console.log(resp)
}).catch((error) => {
})
}


_handleImageChange(e) {
e.preventDefault();
let file = e.target.files[0];
this.setState({
file: file
});
}

观景

  #html
<input className="form-control"
type="file"
onChange={(e)=>this._handleImageChange(e)}
/>
小开

表单数据不会出现在 Web 浏览器控制台中

for (var data of formData) {
console.log(data);
}

试试这种方式，它会显示


提交答案