如何通过 fetch 到 node 和 express 发送和接收 formData？

Question

我正在尝试通过提取 API 将 formData 发送到 node/express 应用程序，并使用该数据更新数据库。我无法访问节点中的 formData。如果有人可以指出我做错了什么？我遵循了其他几个答案，但 none 有所帮助。

我正在使用 javascript 将事件侦听器附加到提交按钮，然后访问提取 API。下面的代码导致空 req.body.

我的html表格：

<form
  action=""
  method="POST"
  name="editQuestionForm"
  id="editQuestionForm"
  class="inputForm"
>
  <input
    type="text"
    id="editInputQuestion"
    name="question"
    value=""
    class="formInput"
    placeholder="Question"
  />
  <textarea
    type="text"
    id="editInputAnswer"
    name="answer"
    value=""
    class="formInput"
    placeholder="Answer"
  ></textarea>
  <button id="editQuestionBtn" class="button" type="Submit">
    Edit Question
  </button>
</form>

我的javascript:

const editQuestionForm = document.getElementById("editQuestionForm");
const editQuestionBtn = document.querySelector("#editQuestionBtn");

editQuestionBtn.addEventListener("click", function (e) {
  id = e.target.getAttribute("data-id");
  updateQuestion(e, id);
});

async function updateQuestion(e, id) {
  e.preventDefault();
  var formData = new FormData(editQuestionForm);
  dataToSend = Object.fromEntries(formData);
  await fetch(`/dbControl/editQuestion?id=${id}`, {
    method: "POST",
    body: JSON.stringify(dataToSend),
  });
}

我的 node/express 应用程序中的端点：

router.post("/editQuestion", function (req, res) {
  try {
    console.log(req.body);
  } catch (err) {
    console.log(err);
  } finally {
    res.end();
  }
});

Answer 1

Content-Type

您没有发送 FormData 对象。您正在发送 JSON.

您正在向 body 属性传递一个字符串，因此您需要明确说明您正在发送 JSON。 fetch 无法推断您的字符串是 JSON.

如果您通过传递 FormData 对象发送多部分表单数据，或者如果您通过传递 URLSearchParams 对象发送 URL 编码数据，则不需要此步骤。 fetch 可以从这些对象中推断出 content-type。

await fetch(`/dbControl/editQuestion?id=${id}`, {
    method: "POST",
    body: JSON.stringify(dataToSend),
    headers: {
        "Content-Type": "application/json"
    }
});

正文解析中间件

根据 documentation:

Contains key-value pairs of data submitted in the request body. By default, it is undefined, and is populated when you use body-parsing middleware such as express.json() or express.urlencoded().

…你需要包含一些正文解析中间件。

app.use(express.json());

（并在注册终点处理程序之前执行此操作）。

如何通过 fetch 到 node 和 express 发送和接收 formData？

How to send and receive formData through fetch to node and express?

javascript

form-data

fetch

node.js

fetch-api

Content-Type

正文解析中间件