Estoy tratando de agregar una imagen a MongoDB a través de Multer y NodeJS. Se crea el almacenamiento de Multer. El middleware basado en Multer llamado upload se inserta en la solicitud POST. Pero cuando realizo la solicitud POST, req.file no está definido . ¿Cuál es la razón para eso?

rutas:

 const express = require('express'); const Menu = require("../models/menu"); const Image = require("../models/image"); const router = express.Router(); const multer = require("multer"); const storage = multer.diskStorage({ destination: (req, file, cb) => { cb(null, "./images/"); }, filename: (req, file, cb) => { cb(null, file.originalname); } }); const upload = multer({storage: storage}); const getMenu = (req, res) => { Menu .find() .then((menu) => res.status(200).json(menu)) .catch((error) => console.log("Ops")); } router.get('/api/menu', getMenu); router.post("/upload", upload.single("articleImage"), (req, res) => { console.log("request----------------", req.file) // UNDEFINED // const image = new Image({ // articleImage: req.file.originalname // }); // image // .save() // .then(() => res.json("Ok")) // .catch((error) => console.log(error)); }) module.exports = router;

forma frontal:

 import axios from 'axios'; import React, { useState } from 'react'; const NewAdvertisement = () => { const [file, setFile] = useState(null); file && console.log(file.name); const onSubmit = (e) => { e.preventDefault(); const fd = new FormData(); fd.append("articleImage", file.name); console.log("fd", fd); axios .post("/upload", fd) // .then(res => console.log(res)) } return ( <form onSubmit = {onSubmit} encType="multipart/form-data" > <input type = "file" filename="articleImage" onChange = {e => setFile(e.target.files[0])}/> <button type = "submit">Submit</button> </form> ); }; export default NewAdvertisement;