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

Question

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

我正在使用 javascript 将事件侦听器附加到提交按钮，然后访问 fetch 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),
  });
}

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

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

Answer 1

内容类型

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

您正在将字符串传递给

body

属性，因此您需要明确表示您正在发送 JSON。

fetch

无法推断您的字符串是 JSON。

如果您通过传递 FormData 对象发送多部分表单数据，或者通过传递 URLSearchParams 对象发送 URL 编码数据，则不需要此步骤。

fetch

可以从这些对象推断内容类型。

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

正文解析中间件

根据文档：

包含请求体中提交的数据的键值对。默认情况下，它是未定义的，当您使用正文解析中间件（例如express.json（）或express.urlencoded（））时，它会被填充。

…你需要包含一些主体解析中间件。

app.use(express.json());

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