javascript - 使用 multer 发送多个表单数据到express API

Question

我想将包括文件在内的表单数据发送到我的 Express API，以便在我的数据库中添加教堂，并且我想为此上传教堂详细信息和图像。这是我的 HTML 表单:

        <form action="" id="ad-bis">
          <div class="form-group">
            <label>INTRODU NUMEle BISERICII</label>
            <input
              type="text"
              name="biserica"
              id="biserica"
              class="form-control"
            />
            <span id="error_biserica" class="text-danger"></span>
          </div>
          <div class="form-group">
            <label>INTRODU ORASUL</label>
            <input type="text" name="oras" id="oras" class="form-control" />
            <span id="error_oras" class="text-danger"></span>
          </div>
          <div class="form-group">
            <label>INTRODU ADRESA</label>
            <input type="text" name="adresa" id="adresa" class="form-control" />
            <span id="error_adresa" class="text-danger"></span>
          </div>
          <div class="form-group">
            <label>INTRODU NUME PREOT</label>
            <input type="text" name="preot" id="preot" class="form-control" />
            <span id="error_preot" class="text-danger"></span>
          </div>
          <div class="form-group">
            <label for="poza">ADAUGA POZA</label>
            <input type="file" id="poza" />
          </div>
          <div class="form-group" align="center">
            <button type="submit" name="save" id="save" class="btn btn-info">
              SALVARE
            </button>
          </div>
        </form>

在我的 js 文件中，我创建了提交函数:

adBis.addEventListener("submit", async e => {
  e.preventDefault();
  const data = new FormData();
  data.append(
    "data",
    JSON.stringify({
      nume: document.querySelector("#biserica").value,
      oras: document.querySelector("#oras").value,
      adresa: document.querySelector("#adresa").value,
      preot: document.querySelector("#preot").value,
      uid: localStorage.getItem("uid")
    })
  );
  data.append("poza", _("#poza").files[0]);
  console.log(data);
  const res = await await fetch("http://localhost:8080/api/site/adaugare", {
    method: "POST",
    body: data
  });
  const serverData = await res.json();
  console.log(res, serverData);
  _(".info").style.display = "none";
  if (!serverData.success) {
    afisareEroare(data.msg);
  }
  console.log("ok");
  await afisRezultate(localStorage.getItem("uid"));
});

然后我使用 multer tu 上传文件在express中创建了端点:

const multer = require("multer");
const storage = multer.diskStorage({
  destination: function(req, file, cb) {
    cb(null, "../images");
  },
  filename: function(req, file, cb) {
    cb(null, file.fieldname + "_" + Date.now() + "_" + file.originalname);
  }
});

const upload = multer({
  storage: storage
}).array("imgUploader", 3);

outer.post("/adaugare", (req, res) => {
  console.log(req.body);
  res.json({ msg: "ok" });
  /*

    */
});

在我的控制台中，req.body 为空如何发送所有数据？我尝试使用 firebase 存储，但它对我不起作用。我错过了什么？谢谢!

Answer 1

第一个提示:由于您使用的是 FormData，因此您可以传入表单以自动获取表单中的所有值。

第二，你在这里等待两次:

const res = await await fetch("http://localhost:8080/api/site/adaugare", [...]

最后 req.body 为空是因为缺少 body-parser，或者正如我在这里看到的，您没有添加 enctype="multipart/form-data" 属性，如果没有此 Multer 将无法从您的表单中获取任何数据。