'trying to upload a file using a multer but doesn't work

I want to upload the file and save it in the images folder But maybe it's a middleware problem, but it's not working properly

There are other functions other than uploading in the program I am developing. so The cord is long.

I wrote the multer function in the routes\home part, so it would be good to focus on that part

this is my directory

enter image description here

app.js


"use strict";

const express = require("express");
const bodyParser = require("body-parser");
const app = express();



const home = require("./src/routes/home"); 



app.set("views", "./src/views"); 
app.set("view engine", "ejs");

app.use(express.static(`${__dirname}/src/public`)); 
app.use(bodyParser.json());

app.use(bodyParser.urlencoded({ extended: true }));

app.use("/", home); 



module.exports = app;

upload.ejs

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="/css/home/styles.css">
    <title>Upload</title>
</head>

<body>
    <header class="upload_header">
        <div class="upload_header_left">
            <span><a href="javascript:history.back()"><i class=" fa-solid fa-arrow-left fa-2x"></i></a></span>
            <h1>upload</h1>
        </div>
        <div class="upload_header_right">
            <form action="upload" method="post" enctype="mulipart/form-data">

                <div class="filebox">
                    <label for="ex_file">upload</label>
                    <input type="file" name="image" id="ex_file">
                </div>

                <button type="submit" value="Upload"><i class="fa-solid fa-paper-plane fa-lg"></i></button>

            </form>

            <span><i class="fa-solid fa-ellipsis-vertical fa-lg"></i></span>
        </div>
    </header>
    <form class="upload_send_input" method="post">
        <label><span>sending man</span><input type="text"></label>

        <label><span>send</span><input type="text"></label>
        <label><span>name</span><input type="text"></label>
    </form>
    <div id="comment">
        <textarea name="" id="" cols="300" rows="10" placeholder="text"></textarea>
    </div>
    <script src="https://kit.fontawesome.com/612ed4556b.js" crossorigin="anonymous"></script>
</body>
[enter image description here]
</html>

routes\home\index.js

"use strict";
const express = require("express");
const router = express.Router();
const app = express();

const path = require('path')
const multer = require('multer')
const storage = multer.diskStorage({
    destination: (req, file, cb) => {
        cb(null, "Images")
    },
    filename: (req, file, cb) => {
        console.log(file);
        cb(null, Date.now() + path.extname(file.originalname));
    }
})
const upload = multer({ storage: storage })
const ctrl = require("./home.ctrl");

router.get("/", ctrl.output.home);
router.get("/login", ctrl.output.login);
router.get("/register", ctrl.output.register);
router.get("/script1", ctrl.output.script1);
router.get("/python", ctrl.output.python);
router.get("/upload", ctrl.output.upload);

router.post("/login", ctrl.process.login);
router.post("/register", ctrl.process.register);
router.post("/python", ctrl.process.python);
router.post("/upload", upload.single('image'), ctrl.process.upload);
module.exports = router;

routes\home\home.ctrl.js

"use strict";

const User = require("../../models/User");
const UserStorage = require("../../models/UserStorage");
const { spawn } = require('child_process');
const iconv = require('iconv-lite');


const output = {
    home: (req, res) => {
        res.render("home/index");
    },
    login: (req, res) => {
        res.render("home/login");
    },
    register: (req, res) => {
        res.render("home/register");
    },
    python: (req, res) => {
        res.render("home/python");
    },
    upload: (req, res) => {
        res.render("home/upload");
    },
    script1: (req, res) => {
        let data1;
        const pythonOne = spawn('python', ['./src/public/python/script1.py']);
        pythonOne.stdout.on('data', function(data) {
            data1 = data.toString();
        })
        pythonOne.on('close', (code) => {
            console.log("code", code);
            console.log(typeof data1);
            res.send(data1);
        })
        pythonOne.stderr.on('data', function(data) {
            console.error(data.toString());
        });
    },
};

const process = {
    login: async(req, res) => {
        const user = new User(req.body);
        const response = await user.login();
        return res.json(response);
    },
    register: async(req, res) => {
        const user = new User(req.body);
        const response = await user.register();
        return res.json(response);
    },
    python: async(req, res) => {
        let data1;
        const pythonOne = await spawn('python', ['./src/public/python/script2.py', req.body.id]);

        pythonOne.stdout.on('data', function(data) {
            data1 = iconv.decode(data, 'euc-kr');
        })
        pythonOne.on('close', (code) => {
            return res.send(JSON.stringify(data1));
        })
        pythonOne.stderr.on('data', function(data) {
            console.error(data.toString());
        });
    },
    upload: (req, res) => {
        res.send("Image Uploaded");
    }
};

module.exports = {
    output,
    process,
};

Solution 1:^[1]

i find problem my ejs file

<form action="upload" method="post" enctype="mulipart/form-data">

Because of a typo of mulipart/form-data

i fix it

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	ì´ê·œì—´

'trying to upload a file using a multer but doesn't work

Solution 1:[1]

Sources

Related Questions

Solution 1:^[1]