Cargue y recupere la imagen en MongoDB usando Mongoose

Requisitos previos: para comenzar con esto, debe estar familiarizado con NodeJS , ExpressJS , MongoDB y Mongoose .

• NodeJS : es un entorno de servidor de código abierto gratuito que utiliza JavaScript en el servidor y se ejecuta en varias plataformas (Windows, Linux, Unix, Mac OS X, etc.). Utiliza programación asincrónica.
• ExpressJS : es un marco de servidor de aplicaciones web NodeJS, diseñado para crear aplicaciones web híbridas, de una sola página y de varias páginas. Es el marco de servidor estándar de facto para node.
• MongoDB : MongoDB es una base de datos NoSQL. MongoDB es un almacén de datos de documentos JSON. Le permite almacenar y consultar documentos de estilo JSON con algunos conocimientos en la parte superior.
• Mongoose : Mongoose es una biblioteca de modelado de datos de objetos (ODM) para MongoDB y Node. js. Administra las relaciones entre los datos, proporciona validación de esquemas y se utiliza para traducir entre objetos en el código y la representación de esos objetos en MongoDB.

Para comenzar, instale los paquetes y módulos necesarios:

• ExpressJS nos permite configurar middleware para responder a requests HTTP.

npm install express --save

• El módulo «body-parser» permite leer (analizar) datos HTTP-POST.

npm install body-parser --save

• Mongoose es una biblioteca cliente de MongoDB que proporciona modelado de objetos para su uso en un entorno asíncrono. Mongoose admite tanto promesas como devoluciones de llamada.

npm install mongoose --save

• Multer es un middleware de nodejs que se utiliza para cargar archivos.

npm install multer --save

• Dotenv es un módulo de dependencia cero que carga variables de entorno desde un archivo .env en process.env.

npm install dotenv --save

• EJS ( Javascript incorporado ) es un motor de plantillas para nodejs . Este motor ayuda a crear páginas HTML a través de plantillas con un código mínimo.

npm install ejs --save

• nodemon es una herramienta de desarrollo que reinicia automáticamente la aplicación de Node cuando se detectan cambios en el archivo en el directorio de código. Mejora la experiencia del desarrollador cuando trabaja en aplicaciones basadas en Nodes. Dado que esta es una herramienta de desarrollo y no forma parte del código de nuestra aplicación, usamos `–save-dev` al instalar este módulo:

npm install nodemon --save-dev

¡Ahora comencemos a codificar! Para cargar una imagen y recuperar una imagen de MongoDB usando Mangoose , siga cada uno de los pasos a continuación, uno por uno.
 

• Paso 0: Cree el archivo ` .env ` que contendrá la configuración específica del entorno.

MONGO_URL=mongodb://localhost/imagesInMongoApp
PORT=3000

• Paso 1: Cree nuestro archivo de servidor ` app.js` . Añádele el siguiente código:

// Step 1 - set up express & mongoose
  
var express = require('express')
var app = express()
var bodyParser = require('body-parser');
var mongoose = require('mongoose')
  
var fs = require('fs');
var path = require('path');
require('dotenv/config');

• Paso 2: Conéctese a MongoDB utilizando la URL de su base de datos. Aquí se usa ‘process.env.MONGO_URL’ para la URL de la base de datos. Este valor se recupera de ` .env ` como una variable de entorno por el módulo `dotenv`. Agrega el siguiente código a ` app.js `

// Step 2 - connect to the database
  
mongoose.connect(process.env.MONGO_URL,
    { useNewUrlParser: true, useUnifiedTopology: true }, err => {
        console.log('connected')
    });

• Paso 3: una vez que hayamos establecido una conexión con nuestra base de datos y hayamos requerido todos los paquetes necesarios, ahora podemos comenzar a definir nuestra lógica del lado del servidor. Entonces, para almacenar una imagen en MongoDB, necesitamos crear un esquema con mongoose. Para eso, cree el archivo ` model.js ` y defina el esquema. El punto importante aquí es que nuestro tipo de datos para la imagen es un búfer que nos permite almacenar nuestra imagen como datos en forma de arrays.

// Step 3 - this is the code for ./models.js
  
var mongoose = require('mongoose');
  
var imageSchema = new mongoose.Schema({
    name: String,
    desc: String,
    img:
    {
        data: Buffer,
        contentType: String
    }
});
  
//Image is a model which has a schema imageSchema
  
module.exports = new mongoose.model('Image', imageSchema);

• Paso 4: Queremos configurar EJS como nuestro motor de plantillas con Express. EJS está diseñado específicamente para crear aplicaciones web híbridas, de una sola página y de varias páginas. Se ha convertido en el marco de servidor estándar para nodejs. El comportamiento predeterminado de EJS es que busca en la carpeta ` views` las plantillas para representar. Crearemos nuestras plantillas en un paso posterior.
  Agrega el siguiente código a ` app.js `:

// Step 3 - code was added to ./models.js
  
// Step 4 - set up EJS
  
app.use(bodyParser.urlencoded({ extended: false }))
app.use(bodyParser.json())
  
// Set EJS as templating engine 
app.set("view engine", "ejs");

• Paso 5: Definiremos la ruta de almacenamiento de la imagen que estamos subiendo. Aquí, estamos usando el middleware Multer para cargar la foto en el servidor en una carpeta llamada » cargas » para que podamos procesarla.
  Agrega el siguiente código a ` app.js `:

// Step 5 - set up multer for storing uploaded files
  
var multer = require('multer');
  
var storage = multer.diskStorage({
    destination: (req, file, cb) => {
        cb(null, 'uploads')
    },
    filename: (req, file, cb) => {
        cb(null, file.fieldname + '-' + Date.now())
    }
});
  
var upload = multer({ storage: storage });

• Paso 6: ahora, cargue el modelo de imagen agregando el siguiente código a ` app.js `:

// Step 6 - load the mongoose model for Image
  
var imgModel = require('./model');

• Paso 7: configure el controlador para la solicitud GET a nuestro servidor. La respuesta muestra una página HTML que muestra todas las imágenes almacenadas en la base de datos y proporciona una interfaz de usuario para cargar nuevas imágenes.
  Agrega el siguiente código a ` app.js `:

// Step 7 - the GET request handler that provides the HTML UI
  
app.get('/', (req, res) => {
    imgModel.find({}, (err, items) => {
        if (err) {
            console.log(err);
            res.status(500).send('An error occurred', err);
        }
        else {
            res.render('imagesPage', { items: items });
        }
    });
});

• Paso 8: maneje la solicitud POST que procesa los datos del formulario enviados por el usuario desde nuestra interfaz de usuario HTML. Esta solicitud tendrá las nuevas imágenes que se están cargando.
  Agrega el siguiente código a ` app.js `:

// Step 8 - the POST handler for processing the uploaded file
  
app.post('/', upload.single('image'), (req, res, next) => {
  
    var obj = {
        name: req.body.name,
        desc: req.body.desc,
        img: {
            data: fs.readFileSync(path.join(__dirname + '/uploads/' + req.file.filename)),
            contentType: 'image/png'
        }
    }
    imgModel.create(obj, (err, item) => {
        if (err) {
            console.log(err);
        }
        else {
            // item.save();
            res.redirect('/');
        }
    });
});

• Paso 9: Configure el servidor al puerto predeterminado con el valor predeterminado de 3000 . La variable de entorno process.env.PORT se usa si está configurada en su ` .env `.
  Agrega el siguiente código a ` app.js `:

// Step 9 - configure the server's port
  
var port = process.env.PORT || '3000'
app.listen(port, err => {
    if (err)
        throw err
    console.log('Server listening on port', port)
})

• Paso 10: Esta es la plantilla HTML para la «página de carga». Tenga en cuenta que el parámetro src para <img> no es una URL típica. Este formato permite mostrar la imagen almacenada en formato binario en la base de datos de Mongo, y la convertimos a base64 para que el navegador pueda renderizarla.
  Agrega el siguiente código a ` views/imagesPage.ejs` :

<!DOCTYPE html>
<html lang="en">
  
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Image Uploading</title>
</head>
  
<body>
    <h1>To Upload Image on mongoDB</h1>
    <hr>
    <div>
        <form action="/" method="POST" enctype="multipart/form-data">
            <div>
                <label for="name">Image Title</label>
                <input type="text" id="name" placeholder="Name" 
                       value="" name="name" required>
            </div>
            <div>
                <label for="desc">Image Description</label>
                <textarea id="desc" name="desc" value="" rows="2" 
                          placeholder="Description" required>
                </textarea>
            </div>
            <div>
                <label for="image">Upload Image</label>
                <input type="file" id="image" 
                       name="image" value="" required>
            </div>
            <div>
                <button type="submit">Submit</button>
            </div>
        </form>
    </div>
  
    <hr>
  
    <h1>Uploaded Images</h1>
    <div>
        <% items.forEach(function(image) { %>
        <div>
            <div>
                <img src="data:image/<%=image.img.contentType%>;base64,
                     <%=image.img.data.toString('base64')%>">
                <div>
                    <h5><%= image.name %></h5>
                      
  
  
<p><%= image.desc %></p>
  
  
  
                </div>
            </div>
        </div>
        <% }) %>
    </div>
</body>
  
</html>

• Paso 11: Cree el directorio ` cargas` que contendrá nuestras imágenes cargadas. El código del Paso 8 hace referencia a este directorio.
   
• Paso 12: Inicie el servidor ejecutando el comando: ` nodemon app.js `

Salida Abra su navegador en http://localhost:3000/  . Ahora debería ver:
 

 ¡Felicidades! ¡Lo hiciste!