How to upload image from input type with axios to mongodb? - image

Question

I failed to save image in input fontend to mongdb, please help me to fix it. I tried to learn without being very good at it.
There might be some code error, please fix it for me.
My code
form
return (
<div className="form-group">
<label>อัพโหลดรูปภาพ</label>
<div className="input-group mb-3">
<input type="file"
className="form-control"
id="img"
accept="image/*"
name="img"
onChange={submitImg}
/>
</div>
<input type="submit" value="ส่งข้อมูล" className="btn btn-primary" />
)
}
export default FormComponent;
mongoose
const mongoose = require("mongoose")
const blogSchema = mongoose.Schema({
title:{
type:String,
required:true
},
content:{
type:{},
required:true
},
author:{
type:String,
default:"Admin"
},
img:{
data:Buffer,
contentType:String
},
slug:{
type:String,
unique:true
}
},{timestamps:true})
module.exports = mongoose.model("Blogs",blogSchema)
router
router.post('/create',upload.single('img'),create)
Save
exports.create = async (req, res) => {
let slug = uuidv4();
let saveBlog = new Blogs({
title: req.body.title,
content: req.body.content,
author: req.body.author,
img: {
data: fs.readFileSync("uploads/"+req.file.filename),
contentType: 'image/png' || 'image/jpg'
},
slug: slug
})
saveBlog
.save()
.then(() => {
console.log("Saved successfully!");
res.status(200).json({ 'blog': 'blog saved successfully' });
})
.catch(err => {
console.log("blog save unsuccessful!");
res.status(400).send('adding new blog failed');
});
}
Image does not save
I want to save multiple data Both the text and pictures