节点/反应：我无法使用 multer 上传带有我的帖子的图像

Question

我正在尝试创建一个小型社交网络，我们可以在其中发送帖子(带或不带图像)。

我设法创建没有图像的帖子(只是文本)，它工作得很好，但是一旦我将图像添加到我的表单并提交表单，就不可能找到图像。通常应该保存在"images"文件夹，但始终为空。

我使用multer来做到这一点，这是我的代码:

我的表单组件:

const WhatsUpForm = ({ className, id, name, placeholder }) => {
const [inputValue, setInputValue] = useState("");
const inputHandler = (e) => {
setInputValue(e.target.value);
};
const submitHandler = async (e) => {
e.preventDefault();
const post = {
author_firstname: JSON.parse(localStorage.getItem("user")).user_firstname,
author_lastname: JSON.parse(localStorage.getItem("user")).user_lastname,
message: inputValue,
date_creation: dayjs().format(),
image_url: ""
};
// POST request
await POST(ENDPOINTS.CREATE_POST, post);
// document.location.reload()
};
return (
<form className={className} onSubmit={submitHandler} method="POST" action="/api/post" enctype="multipart/form-data">
<input className="testt" type="text" id={id} name={name} placeholder={placeholder} required  value={inputValue} onChange={inputHandler}/>
<div className="icons_container">
<input type="file" name="image" id="image" className="icons_container__add_file" />
<label for="image">
<FontAwesomeIcon icon={faImages} />
</label>
<button type="submit" className="icons_container__submit">
<FontAwesomeIcon icon={faPaperPlane} />
</button>
</div>
</form>
);
};

我的路由和multer的代码:

const multer = require("multer");
const path = require("path");
const storage = multer.diskStorage({
destination: (req, file, callback) => {
callback(null, "../images");
},
filename: (req, file, callback) => {
console.log("multer");
console.log("file :", file);
callback(null, Date.now() + path.extname(file.originalname));
},
});
const upload = multer({ storage: storage });
// Post CRUD
router.get("/", auth, postCtrl.getAllPosts);
router.post("/", auth, upload.single("image"), postCtrl.createPost);
router.delete("/:id", auth, postCtrl.deletePost);

router.put("/:id"， auth, postCtrl.updatePost);

console.log("multer")不是触发器，当我在浏览器的网络选项卡中查看有效负载时，我没有看到任何图像。

最后，我的createPost函数控制器:

exports.createPost = (req, res, next) => {
let { body } = req;
delete(req.body.image_url)
body = {
...body,
likes: "",

};
const sql = "INSERT INTO posts SET ?";
db.query(sql, body, (err, result) => {
if (err) {
res.status(404).json({ err });
throw err;
}
res.status(200).json({ msg: "Post added..." });
});
};

现在，我不想把图像的URL在我的SQL数据库，我只是想保存在我的图像文件夹中的图像。我已经验证了路径(../images)，它是正确的。如何将图像保存在图像文件夹中?

Answer 1

我没有看到文件数据从您的POST请求发送到服务器

// object post doesn't have the file data
await POST(ENDPOINTS.CREATE_POST, post);

考虑使用FormData

const submitHandler = async (e) => {
e.preventDefault();
const post = new FormData();
// non form data
formData.append("author_firstname", JSON.parse(localStorage.getItem("user")).user_firstname);
...

// form data
formData.append("image",    document.getElementById("image").files[0]);
...

// POST request
await POST(ENDPOINTS.CREATE_POST, post);
// document.location.reload()
};