html 表单发布请求的 formdata 对象为空

Posted 2023-04-13

【中文标题】html 表单发布请求的 formdata 对象为空

【英文标题】：formdata object is empty for html form post request

【发布时间】：2015-09-27 01:54:12

【问题描述】：

我正在尝试使用 formdata 对象将表单数据发送到我的服务器。我需要这个，因为我的输入字段之一是一个文件。但是，当我尝试将数据发送到我的服务器时，formdata 对象是空白的，它还会打印出“”。问题是什么？我已将 jquery 更新到支持 formdata 的 11.1。谢谢。

  <form enctype="multipart/form-data" name="formName" id="formId">
    <input type="text" name="name" class="form-control" id="name">
  </form>
  <button type="submit" class="btn btn-xl sub">Send Message</button>

  <script>
      $(".sub").click(function()
         var formElement = document.querySelector("form");
         alert(formElement); //alert message is "[object htmlFormElement]"
         var d = new FormData(formElement);
         alert(JSON.stringify(d)); //alert message is ""
         $.post("/email",d,function(data)
            alert("success!");
         );
      );
  </script>

服务器：

/*never reaches endpoint*/
app.post('/email', function(req, res) 
    console.log("entered");
    console.log(req.body) // form fields
    console.log(req.files) // form files
    var resume = req.files;
    email(req.body, resume);
);

https://developer.mozilla.org/en-US/docs/Web/API/FormData/Using_FormData_Objects

【问题讨论】：

它是一个空对象，这就是它作为字符串的样子。旁白：即使填充，它对 JSON.stringify() 看起来也是一样的......

我想知道为什么它是一个空对象。我无法通过我的发布请求发送填充的表单。它在客户端是空的，它永远不会进入服务器。我的请求有什么不妥吗？

好的，$.post 是什么？

一个 jquery 发布请求，应该将表单数据发送到我的服务器。在我尝试实现 FormData 对象之前，我能够成功地用我的代码与客户端/服务器进行通信......所以我认为这可能是原因，但我不知道为什么

【参考方案1】：

您如何在节点服务器上解析 POST 请求的正文？

问题是FormData 会将内容类型设置为multipart/form-data，Express 的body-parser 无法理解。

注意评论here：

[body-parser] 不处理多部分主体，因为它们复杂且通常很大。对于多部分实体，您可能对以下模块感兴趣：busboy 和 connect-busboy；多方和连接多方；强大;计算。

换句话说，您必须使用不同的模块来处理 FormData 发送的多部分正文。我可以推荐formidable，在这种情况下，你的服务器代码看起来像：

const formidable = require('formidable')

exports.createPost = (req, res, next) => 
    var form = new formidable.IncomingForm();
    form.parse(req, (err, fields, files) => 
        console.log(fields)
        res.send('NOT IMPLEMENTED: pollsController createPost');