我正在尝试在 node.js 后端使用 multer 上传文件并在前端对 js 做出反应，但它在公用文件夹中的 multer 的后端不起作用

Question

frontend with React.js looks good i saw the other people who did same thing as i did but i don't know where is the problem? anyone can help me ?

    const [cours, setCours] = useState([]);
    const [description, setDescription] = useState("")
    const [title, setTitle] = useState("")
    const coursHandle = (e) => { setCours([e.target.files]) }

    const onsubmit = async (e) => {
       e.preventDefault();

       const formData = new FormData();
       formData.append("description", description);
       formData.append("title", title);
       // cours.forEach((elem) => { formData.append("cours", elem) });
       formData.append("cours", cours)
       // for (let i = 0; i < cours.length; i++) {
       //     formData.append("cours", cours[i])
       // }
       await axios.post("http://localhost:5000/upload", formData)
           .then((res) => console.log("successfully file post", res)).catch((err) => 
            console.log("error with file post", err))
   }

and backend with multer is here this code is in my app.js app.use(express.static(path.join(__dirname, 'public'))); and the public folder is the same place as app.js

const multer = require("multer");
const path = require("path");

const MIME_TYPES = {
    "file/pdf": "pdf",
    "file/docx": "docx",
    "file/txt": "txt",
    "file/png": "png",
    "file/jpeg": "jpg",
    "file/jpg": "jpg",
}

const fileStorage = multer.diskStorage({
    destination: (req, file, cb) => {
        cb(null, "public");
    },
    filename: (req, file, cb) => {
        const nameObject = path.parse(file.originalname);
        // const nameObject = file.originalname.split(' ').join('_');
        const extension = MIME_TYPES[file.mimetype];
        cb(null, nameObject.name.split(" ").join("_") + Date.now() + "." + extension);
    }
})

module.exports = { multerUpload: multer({ storage: fileStorage }).single("file") }

Answer 1

In last line

module.exports = { multerUpload: multer({ storage: fileStorage }).single("file")

the argument under single is file , but in your frontend form there is no input with name file maybe you have to change the argument of single function from file to cours

Answer 2

I found the answer for my question,

formData.append("cours", cours)  

Here the key name as i try to send is "cours" and:

module.exports = { multerUpload: multer({ storage: fileStorage }).single("file") 

Here the key name for single function is "file":! that was a first problem and another one was this :

I've forgoten to add this line in my tag !

encType="multipart/form-data"

And finally my multer js is:

const fileStorage = multer.diskStorage({
    destination: (req, file, cb) => {
        cb(null, "public/files");
    },
    filename: (req, file, cb) => {
        console.log("filename :", file);
        const nameObject = path.parse(file.originalname);
        cb(null, nameObject.name.split(" ").join("_") + Date.now() + 
     nameObject.ext);
   }
})

module.exports = { multerUpload: multer({ storage: fileStorage }).array("cours") }