Cargue la gesti贸n de archivos en Node.js con Express y Multer

    Introducci贸n

    Los usuarios no solo consumen datos, tambi茅n producen y cargan datos. Pueden enviar datos a trav茅s de aplicaciones como mensajeros o correo electr贸nico a destinatarios espec铆ficos o cargar archivos a redes sociales y plataformas de transmisi贸n de datos como Facebook o YouTube.

    Dicho esto, casi todos los sitios web interactivos actuales admiten la carga de archivos.

    Bibliotecas de carga de archivos

    Hay varias bibliotecas de nodes disponibles en NPM que pueden simplificar el proceso de validaci贸n y carga de archivos al servidor. Entre ellos, es la opci贸n m谩s popular en estos d铆as. Multer, Formidabley Multipartidista.

    Todos tienen versiones estables y son compatibles con una comunidad en l铆nea de desarrolladores de c贸digo abierto.

    驴Qu茅 es Multer?

    Multer son art铆culos b谩sicos populares de Node.js que se utilizan para manejar multipart/form-data solicitud. El lo usa ayudante de mesero analizar los datos que ha recibido a trav茅s de un formulario HTML. Esto mejora en gran medida su rendimiento porque el m贸dulo busboy no tiene rival para el an谩lisis de datos de formularios.

    Multer nos proporciona disciplina y flexibilidad en nuestro manejo multipart/form-data aplicaciones: obtenemos informaci贸n detallada sobre cada archivo cargado, la capacidad de agregar un motor de almacenamiento personalizado, la validaci贸n de archivos de acuerdo con nuestras necesidades, la capacidad de establecer l铆mites en los archivos cargados, etc.

    Arreglo del proyecto

    Dado que no almacenaremos nuestras im谩genes en una base de datos, sino en una carpeta simple para mayor nitidez y simplicidad, hagamos otra carpeta en nuestra carpeta de proyecto y as铆gnele un nombre, digamos, uploads.

    Ahora instalemos Express:

    $ npm i express
    

    Y finalmente, instalemos Multer:

    $ npm i multer
    

    Implementacion de proyecto

    En este punto, estamos listos para escribir algo de c贸digo, comenzando con los formularios HTML que usaremos para recolectar informaci贸n.

    Comenzamos con el formulario para subir un archivo individual:

    <form method="POST" action="/upload-profile-pic" enctype="multipart/form-data">
        <div>
            <label>Select your profile picture:</label>
            <input type="file" name="profile_pic" />
        </div>
        <div>
            <input type="submit" name="btn_upload_profile_pic" value="Upload" />
        </div>
    </form>
    

    Y luego con un formulario que nos permite subir varios archivos:

    <form method="POST" action="/upload-multiple-images" enctype="multipart/form-data">
        <div>
            <label>Select multiple images:</label>
            <input type="file" name="multiple_images" multiple />
        </div>
        <div>
            <input type="submit" name="btn_upload_multiple_images" value="Upload" />
        </div>
    </form>
    

    Puede colocar estos formularios en p谩ginas separadas o en la misma. Para el prop贸sito de este tutorial, son uno en una fila:

    Los formularios HTML son bastante simples, asumiendo multipart/form-data y orientar las funciones adecuadas que se ocupan de sus aplicaciones.

    Aplicaci贸n express

    Con nuestros formularios listos, podemos trabajar en la l贸gica real para cargar y validar archivos a trav茅s de Express.

    Creamos un archivo llamado app.js en la ra铆z del proyecto y comience importando los m贸dulos requeridos:

    const express = require('express');
    const multer = require('multer');
    const path = require('path');
    

    Ahora creemos nuestra aplicaci贸n Express:

    const app = express();
    

    Y finalmente, configuremos el puerto en el que se ejecutar谩:

    const port = process.env.PORT || 3000;
    

    El es public los archivos est谩ticos que queremos servir est谩n en el directorio de nuestra carpeta ra铆z, as铆 que configur茅moslo como un directorio est谩tico usando express.static:

    app.use(express.static(__dirname + '/public'));
    

    En este punto, definamos la ubicaci贸n de almacenamiento de nuestras im谩genes:

    const storage = multer.diskStorage({
        destination: function(req, file, cb) {
            cb(null, 'uploads/');
        },
    
        // By default, multer removes file extensions so let's add them back
        filename: function(req, file, cb) {
            cb(null, file.fieldname + '-' + Date.now() + path.extname(file.originalname));
        }
    });
    

    Y finalmente, ejecutemos la aplicaci贸n usando el puerto que configuramos anteriormente:

    app.listen(port, () => console.log(`Listening on port ${port}...`));
    

    Validaci贸n y carga de archivos

    Por razones b谩sicas de seguridad, necesitaremos validar los archivos antes de subirlos a nuestros servidores. Editemos el app.js archivo y agregue ambas funciones:

    app.post('/upload-profile-pic', (req, res) => {
        // 'profile_pic' is the name of our file input field in the HTML form
        let upload = multer({ storage: storage, fileFilter: helpers.imageFilter }).single('profile_pic');
    
        upload(req, res, function(err) {
            // req.file contains information of uploaded file
            // req.body contains information of text fields, if there were any
    
            if (req.fileValidationError) {
                return res.send(req.fileValidationError);
            }
            else if (!req.file) {
                return res.send('Please select an image to upload');
            }
            else if (err instanceof multer.MulterError) {
                return res.send(err);
            }
            else if (err) {
                return res.send(err);
            }
    
            // Display uploaded image for user validation
            res.send(`You have uploaded this image: <hr/><img src="${req.file.path}" width="500"><hr /><a href="./">Upload another image</a>`);
        });
    });
    

    Aqu铆, aceptamos una solicitud HTTP POST, que contiene la informaci贸n de la imagen incrustada. La funci贸n que realmente se encarga de la funcionalidad de carga es multer().single() m茅todo.

    Puede que hayas notado la fileFilter: helpers.imageFilter pero no el helpers archivo. As铆 que creemos un nuevo archivo en nuestro directorio de proyectos y as铆gnele un nombre helpers.js. Escribiremos aqu铆 un c贸digo que se utilizar谩 para comprobar si la imagen es el archivo enviado o no.

    const imageFilter = function(req, file, cb) {
        // Accept images only
        if (!file.originalname.match(/.(jpg|JPG|jpeg|JPEG|png|PNG|gif|GIF)$/)) {
            req.fileValidationError="Only image files are allowed!";
            return cb(new Error('Only image files are allowed!'), false);
        }
        cb(null, true);
    };
    exports.imageFilter = imageFilter;
    

    Por supuesto, para usar este m贸dulo, necesitaremos importarlo en la parte superior de nuestro app.js archivo:

    const helpers = require('./helpers');
    

    Ahora podemos ejecutar nuestra aplicaci贸n y validar que est谩 funcionando correctamente:

    Cargar varios archivos

    Cargar varios archivos es b谩sicamente lo mismo que cargar un solo archivo. Aunque, en lugar del multer().single() funci贸n, usamos la multer().array() funci贸n:

    app.post('/upload-multiple-images', (req, res) => {
        // 10 is the limit I've defined for number of uploaded files at once
        // 'multiple_images' is the name of our file input field
        let upload = multer({ storage: storage, fileFilter: helpers.imageFilter }).array('multiple_images', 10);
    
        upload(req, res, function(err) {
            if (req.fileValidationError) {
                return res.send(req.fileValidationError);
            }
            else if (...) // The same as when uploading single images
    
            let result = "You have uploaded these images: <hr />";
            const files = req.files;
            let index, len;
    
            // Loop through all the uploaded images and display them on frontend
            for (index = 0, len = files.length; index < len; ++index) {
                result += `<img src="${files[index].path}" width="300" style="margin-right: 20px;">`;
            }
            result += '<hr/><a href="./">Upload more images</a>';
            res.send(result);
        });
    });
    

    Y ahora, valide si todo est谩 funcionando correctamente:

    Conclusi贸n

    Los usuarios no solo consumen datos, sino que los producen y, en muchos casos, tienen que subirlos a un servidor web. Pueden enviar datos a trav茅s de aplicaciones como mensajeros o correo electr贸nico a destinatarios espec铆ficos, o pueden cargar archivos a redes sociales y plataformas de transmisi贸n de datos como Facebook o YouTube.

    En este art铆culo, usamos Express.js y la biblioteca Multer para manejar la funcionalidad b谩sica de carga de archivos en una aplicaci贸n web simple.

    .

    Etiquetas:

    Deja una respuesta

    Tu direcci贸n de correo electr贸nico no ser谩 publicada. Los campos obligatorios est谩n marcados con *