数据未从 HTML 表单传递到 req.body 变量

Question

已删除，因为它不正确

Answer 1

解释

对于这种问题，关键是知道请求的Content-Type。

When I run the POST request in the form itself e.g. The form uploads to the server with no problem.

Form 元素的默认 Content-Type 是 application/x-www-form-urlencoded（参见 this）。在 server-side 上，你有类似 app.use(express.urlencoded({extended:true}) 的东西来解析 application/x-www-form-urlencoded 格式的请求并且它有效。

现在，您正在使用另一个 Content-Type 代码 let formData = new FormData(e.target)。它是 multipart/form-data，参见 the documentation。在 server-side 上，您的 req.body 是空的，因为您没有正确的中间件来解析 multipart/form-data 格式的请求。

(你可以把它想象成2个人使用2种不同的语言，他们无法相互理解)

动作

至少2个选择：

因为 Express 没有 built-in 中间件来解析 multipart/form-data 格式，您需要安装类似 multer 的东西来完成这项工作。
(推荐) multipart/form-data通常用于处理上传文件请求，这里不是。您可以发送 application/x-www-form-urlencoded 格式的请求。您需要 convert FormData to urlencoded format 并设置正确的 Content-Type header.

...
 const urlEncoded = new URLSearchParams(formData).toString();
 fetch("http://localhost:5000/add-user", {
            method: "POST",
            body: urlEncoded,
            headers: {
               'Content-Type': 'application/x-www-form-urlencoded'
            }
        }).then((response) => {
            console.log(response);
            return response.json();
        })

Answer 2

这一点 jQuery 解决了我的问题：

$('#formSend').serialize(),

在抓取中 API 像这样：

fetch("/yourHTTPpath", {
                method: "POST",
                body: $('#formSend').serialize(),
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded'
                }
            }).then((response) => {
                console.log(response);
                return response.json();
            })

数据未从 HTML 表单传递到 req.body 变量

Data not passing to req.body variables from HTML form

javascript

node.js

reactjs

express

knex.js

解释

动作