javascript - 使用 multer 发送多个表单数据以表达 API
问题描述
我想将包含文件的表单数据发送到我的 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 存储,但它对我不起作用。我错过了什么?谢谢!
解决方案
第一个提示:由于您使用的是 FormData,因此您可以传入表单以自动获取表单中的所有值。
其次,您在这里等待两次:
const res = await await fetch("http://localhost:8080/api/site/adaugare", [...]
最后req.body
一个空是因为缺少 body-parser 或者,正如我在这里看到的,你没有添加enctype="multipart/form-data"
属性,没有这个 Multer 不会从你的表单中获取任何数据。
推荐阅读
- arrays - 猫鼬在没有 array.find 或 array.some 或 array.filter 的情况下找到找到的对象
- qt - 将 QQuickView 渲染到 QOpenGLFramebufferObject 时缺少对象
- regex - RegEx 字符串查找两个字符串并删除文件中的其余文本
- docusignapi - 一旦所有签名者都签署了文件,docusign 是否有任何回电或回复?
- windows - 任务计划程序,使用命令执行 powershell 脚本
- java - 这个关于 RunTimeException 的单元测试对我来说没有任何意义
- mongodb - mongoDB 正则表达式扫描优化 - 基于后缀?
- python - sqlalchemy 无法在过滤器选项中获取带有布尔字段的数据(用 is 指定)
- javascript - JS:使用 ID 的第二个对象数组过滤对象数组
- linux - 如何告诉 awk 不要对空行进行任何更改