javascript - 关于将数据发布到expressjs的简单xmlhttprequest的问题

Question

• 使用nodejs、xmlhttprequest来处理简单的表单发布数据。

• 使用 formdata() 构造函数从 html 获取值。但在

• expressjs，请求正文未正确获取。它抛出
  以下错误。通过
  发布数据会出现什么问题 下面的代码。

HTML:

> <form id='loginForm'>
>       <div>
>         <label>Username:</label>
>         <input type="text" name="title" />
>         <br/>
>       </div>
>       <div>
>         <label>Password:</label>
>         <input type="password" name="descr" />
>       </div>
>       <div>
>         <input type="submit" value="Submit" />
>       </div>
>     </form>

脚本:

window.onload = function () {
var testForm = document.getElementById('loginForm');
testForm.onsubmit = function(event) {
    event.preventDefault();
    const XHR = new XMLHttpRequest();
    var formData = new FormData(testForm);
    XHR.open( "POST", "http://localhost:5000/addCat", true);
    XHR.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
    XHR.send(formData);
}
}

但是在expressjs调用中:

const addCategories = (request, response) => {
  const { title, descr } = request.body
  console.log(request.body);

// output: { '------WebKitFormBoundaryxBFmvN6Sw8QT3BA7\r\nContent-Disposition: form-data; name': '"title"\r\n\r\nsdsf\r\n------WebKitFormBoundaryxBFmvN6Sw8QT3BA7\r\nContent-Disposition: form-data; name="descr"\r\n\r\nsdfdsfds\r\n------WebKitFormBoundaryxBFmvN6Sw8QT3BA7\r\nContent-Disposition: form-data; name="title"\r\n\r\nnewtitle\r\n------WebKitFormBoundaryxBFmvN6Sw8QT3BA7\r\nContent-Disposition: form-data; name="descr"\r\n\r\ngoind descriptions\r\n------WebKitFormBoundaryxBFmvN6Sw8QT3BA7--\r\n' }


  client.query('INSERT INTO categoryLists (title, descr) VALUES ($1, $2)', [title, descr], (error, results) => {
    if (error) {
      throw error
    }
    response.status(201).send(`User added with ID: ${results.insertId}`)
  })
};

出现错误: 错误:“标题”列中的空值违反了非空约束

Answer 1

你说过:

XHR.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');

...但是 FormData 对象生成多部分格式的请求，而不是 urlencoded 的请求。

删除该行。让 XHR 从 FormData 对象生成自己的 Content-Type header 。

<小时/>

您还需要确保在 Express.js 代码中拥有能够处理多部分数据的正文解析器。