FormData.append("key", "value") 不起作用

Posted 2023-02-22

【中文标题】FormData.append("key", "value") 不起作用

【英文标题】：FormData.append("key", "value") is not working

【发布时间】：2011-12-06 19:42:47

【问题描述】：

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

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，都一样：/

【参考方案1】：

Chrome 50+ 和 Firefox 39+（分别为 44+）的新功能：

formdata.entries()（与 Array.from() 结合使用以获得可调试性） formdata.get(key) 还有更多非常有用的方法

原答案：

我通常会“调试”FormData 对象，只需将其发送（任何地方！）并检查浏览器日志（例如 Chrome 开发工具的“网络”选项卡）。

您不需要相同的 Ajax 框架。你不需要任何细节。发送即可：

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

简单。

【讨论】：

谢谢 - 这是通过在 Chrome 控制台中键入 FormData 对象来获取它的一种有用的快速方法。

According to Google formData 方法已添加到 Chrome v50 中。

如果是 Safari 之类的移动浏览器，您会如何查看浏览器日志？我在一个用于移动设备的网络应用程序中使用 FormData 对象，但不知道如何调试它。

@kiwicomb123 Formdata.entries() + Array.from() + alert() 如果它足够现代，或者查看mobile debugging

所以没有边缘或ie11？

【参考方案2】：

你说它不起作用。你期望发生什么？

无法从FormData 对象中获取数据；它只是供您使用与XMLHttpRequest 对象（用于send 方法）一起发送数据。

大约五年后更新：在一些较新的浏览器中，这不再是正确的，您现在可以看到提供给FormData 的数据，除了只是将数据填充到其中。 See the accepted answer 了解更多信息。

【讨论】：

好吧……这太糟糕了。为什么我不能在控制台中记录 FormData？ :-( 这对我来说毫无意义，因为我认为这是一个常见的对象

@netzaffin：只要您打开网络选项卡并开始记录，Firebug 和 Chrome 的检查器都可以让您在 XHR 请求中查看发送的请求参数，因此您应该能够继续那。您还可以创建一个包装器对象来记录字段并附加到 FormData，然后检查其值（不要忘记发送内部 FormData 而不是包装器对象）。

至少，我可以检查formdata对象里面是否有文件吗？

@MarceloBarbosa：您似乎无法从中获取任何信息。您只需要自己保留这些信息。

正如@Jesper 所指出的，您可以在 Developer tools 的网络选项卡选项卡中检查发送的 XHR 请求，那里有 Params 选项，甚至可以让您查看发送的 POST 请求的内容。还有响应。

【参考方案3】：

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

js:

$('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)
    //...

【参考方案4】：

如果您在 Chrome 中，您可以查看帖子数据

这里是如何检查帖子数据

转到网络选项卡 查找您要发送帖子数据的链接 点击它 在 Headers 中，您可以检查 Request Payload 以检查 post 数据

【参考方案5】：

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

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

试试这个方法会显示的

【参考方案6】：

你可以看到 你需要使用console.log(formData.getAll('your key'))； 看着 https://developer.mozilla.org/en-US/docs/Web/API/FormData/getAll

【参考方案7】：

在我的 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]":"[e-mail]" => "user":"email":"[e-mail]"

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

【参考方案8】：

反应版本

确保有'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) 
 />