addItem.js(express.js文件)
const express = require("express");
const router = express.Router();
var multer = require("multer");
const AddItem = require("../models/addItemModel");
var storage = multer.diskStorage({
destination: function (req, file, cb) {
cb(null, "newItems/");
},
filename: function (req, file, cb) {
cb(null, Date.now() + file.originalname);
},
});
var upload = multer({ storage: storage });
router.get("/", (req, res) => {
AddItem.find({}, (err, data) => {
res.json(data);
});
});
/*multiple files upload*/
router.post("/", upload.array("photos", 5), function (req, res, next) {
var fileinfo = req.files;
var title = req.body.title;
console.log(title);
console.log(fileinfo);
addItem = new AddItem({
photos: fileinfo.path,
title: req.body.title,
});
addItem.save(() => {
res.json("Success");
});
module.exports = router;
addItem.js
const AddNew = (props) => {
const [title, setTitle] = useState();
const [photos, setPhotos] = useState([]);
const addItems = () => {
const photo = photos;
data.append("title", title);
data.append("photos", photo);
axios
.post("http://localhost:80/newItem", data)
.then((res) => console.log(res))
.catch((e) => console.log(e));
};
return (
<div>
<Container>
<Form.Group>
<Form.File
id="exampleFormControlFile1"
label="upload images"
multiple
onChange={(e) => {
const img = Array.from(e.target.files);
setPhotos(img);
}}
accept=".jpg"
/>
</Form.Group>
<Form.Group controlId="exampleForm.ControlInput1">
<Form.Label>Title</Form.Label>
<Form.Control
type="text"
placeholder="Title"
value={title}
onChange={(e) => setTitle(e.target.value)}
/>
</Form.Group>
</Container>
</div>
);
};
export default AddNew;
在上面的代码中,我试图使用multer作为图像的中间件,使用react和express and react来存储图像。但是我没有将图像存储在文件夹和图像链接中,而是将请求正文存储在mongodb中。如何做到这一点?This is my folder structure on the left.