← Volver

Subir imagen con Multer en Node js

Publicado el 26 de agosto de 2025

Node JS

En la parte del backend creamos la funcion storage que determinará el destino y el nombre que se le dará a la imagen.

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

const app = express();

app.use(cors());

const storage = multer.diskStorage({
    destination: (req, file, cb) => {
        cb(null, "uploads/");
    },
    filename: (req, file, cb) => {
        cb(null, Date.now() + path.extname(file.originalname));
    }
});

const upload = multer({ storage });

app.post("/upload", upload.single("imagen"), (req, res) => {
    console.log(req.file);
    res.json({
        status: "success",
        message: "Imagen subida correctamente",
        file: req.file
    })
});

app.listen(3000, () => {
    console.log("Servidor en http://localhost:3000");
});

En la parte del frontend enviamos la imagen en un FormData, a la dirección del endpoint «/upload».

const formButton = document.querySelector("#form-button");
const uploadImg = document.querySelector("#upload-img");

const fetchUploadImg = async (file) => {

    const formData = new FormData();
    formData.append('imagen', file);

    try {
        const res = await fetch('http://localhost:3000/upload', {
            method: 'POST',
            body: formData
        });

        const data = await res.json();
        console.log(data);
        alert("Imagen subida con éxito!");
    } catch (err) {
        console.error(err);
        alert("Error al subir la imagen");
    }
}


formButton.addEventListener("click", (e) => {
    const file = uploadImg.files[0];

    if (!file) {
        alert("No has subido imagen");
        return;
    }

    fetchUploadImg(file);
});

Finalmente tenemos el código HTML con el input de tipo «file».

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./assets/css/styles.css">
    <script defer type="module" src="./assets/js/script.js"></script>
    <title>App Multer</title>
</head>

<body class="layout">
    <nav class="nav__layout">
        <div class="nav__logo">c</div>
        <div class="nav__title">Multer</div>
    </nav>

    <main class="main__layout">
        <div class="main__container">
            <h1 class="main__title">Subir imagen</h1>

            <div class="form__field">
                <label class="form__label" for="upload-img">Seleccionar imagen</label>
                <input class="form__file" type="file" name="upload-img" id="upload-img">
            </div>

            <div class="form__field">
                <button id="form-button" class="form__button">Subir imagen</button>
            </div>

        </div>
    </main>
</body>

</html>