Multer MERN stack
Проблемма с загрузкой файлов через Multer
Frontend:
import React, {useState} from 'react'
import axios from "axios";
const UploadHentai = () => {
const form = new FormData()
const [formData, setForm] = useState({})
const upload = async () => {
form.append('title', formData.title)
form.append('description', formData.description)
await axios.post('/api/hentai/new', form)
}
return(
<form onSubmit={() => upload()} encType="multipart/form-data">
<input type="text" name="title"
onChange={e => setForm({...form, title: e.target.value})}
/>
<input type="file" name="cover"
onChange={e => form.append('cover', e.target.files[0])}
/>
<input type="text" name="description"
onChange={e => setForm({...form, description: e.target.value})}
/>
<button type="submit">Submit</button>
</form>
)
}
export default UploadHentai
Backend:
const { Router }= require('express')
const multer = require('multer')
const router = Router()
const hentaiCoversFolder = 'public/hentai/covers'
const Hentai = require('../models/Hentai')
const imageMIMETypes = ['images/jpeg', "images/jpg", "images/png"]
const upload = multer({
dest: hentaiCoversFolder,
fileFilter: (req, file, cb) => {
cb(null, imageMIMETypes.includes(file.mimetype))
}
});
router.post('/search', async (req, res) => {
try{
const { query } = req.body
const result = await Hentai.find({title: query.title})
return res.status(200).json({result})
} catch (e) {
return res.status(400).json({msg: 'Something went wrong'})
}
})
router.post('/new', upload.single('cover'),async (req, res) => {
try{
const fileName = req.file.filename
const data = req.body
const hentai = new Hentai({
title: data.title,
description: data.description,
cover: fileName
})
await hentai.save()
return res.status(200).json({hentai})
} catch (e) {
return res.status(400).json({msg: 'Something went wrong'})
}
})
module.exports = router
Проблемма заключается в том что в multer приходит не изображение