Carga de archivos en Node.js

Introducción: la carga de archivos significa que un usuario de la máquina cliente solicita cargar un archivo en el servidor. Por ejemplo, los usuarios pueden subir imágenes, videos, etc. en Facebook, Instagram, etc.

Características del módulo Multer: El archivo se puede cargar en el servidor utilizando el módulo Multer. Hay otros módulos en el mercado, pero multer es muy popular cuando se trata de cargar archivos. Multer es un middleware de node.js que se usa para manejar datos de varias partes/formularios, que se usa principalmente como biblioteca para cargar archivos.

Nota: Multer procesará solo aquellos formularios que sean de varias partes (multipart/form-data). Entonces, cada vez que use multer, asegúrese de poner multipart en forma.

Introducción:

Es fácil de empezar y fácil de usar.
Es un módulo ampliamente utilizado y popular para cargar archivos.
Los usuarios pueden cargar archivos individuales o múltiples a la vez.

Instalación del módulo Multer:

Puede visitar el enlace Instalar módulo multer . Puede instalar este paquete usando este comando.
```
npm install multer
```
Después de instalar multer, puede verificar su versión de multer en el símbolo del sistema usando el comando.
```
npm version multer
```
Después de eso, puede crear una carpeta y agregar un archivo, por ejemplo, index.js. Para ejecutar este archivo, debe ejecutar el siguiente comando.
```
node index.js
```
Módulo requerido : debe incluir el módulo multer en su archivo usando estas líneas.
```
var multer = require('multer');
```

Entonces, Multer básicamente agrega un objeto de archivo o un objeto de archivos y un objeto de cuerpo al objeto de solicitud. El objeto archivo/archivos contiene todos los archivos que se cargan a través del formulario y todos los valores de los campos de texto del formulario están contenidos en el cuerpo del objeto. Así es como multer vincula los datos cada vez que se envía un formulario.

Nombre de archivo: Signup.ejs

<!DOCTYPE html>
<html>
  
<head>
    <title>FILE UPLOAD DEMO</title>
</head>
  
<body>
    <h1>Single File Upload Demo</h1>
   
    <form action="/uploadProfilePicture" 
      enctype="multipart/form-data" method="POST">
      
        <span>Upload Profile Picture:</span>  
        <input type="file" name="mypic" required/> <br>
        <input type="submit" value="submit"> 
    </form>
</body>
  
</html>

Nombre de archivo: index.js

const express = require("express")
const path = require("path")
const multer = require("multer")
const app = express()
    
// View Engine Setup
app.set("views",path.join(__dirname,"views"))
app.set("view engine","ejs")
    
// var upload = multer({ dest: "Upload_folder_name" })
// If you do not want to use diskStorage then uncomment it
    
var storage = multer.diskStorage({
    destination: function (req, file, cb) {
  
        // Uploads is the Upload_folder_name
        cb(null, "uploads")
    },
    filename: function (req, file, cb) {
      cb(null, file.fieldname + "-" + Date.now()+".jpg")
    }
  })
       
// Define the maximum size for uploading
// picture i.e. 1 MB. it is optional
const maxSize = 1 * 1000 * 1000;
    
var upload = multer({ 
    storage: storage,
    limits: { fileSize: maxSize },
    fileFilter: function (req, file, cb){
    
        // Set the filetypes, it is optional
        var filetypes = /jpeg|jpg|png/;
        var mimetype = filetypes.test(file.mimetype);
  
        var extname = filetypes.test(path.extname(
                    file.originalname).toLowerCase());
        
        if (mimetype && extname) {
            return cb(null, true);
        }
      
        cb("Error: File upload only supports the "
                + "following filetypes - " + filetypes);
      } 
  
// mypic is the name of file attribute
}).single("mypic");       
  
app.get("/",function(req,res){
    res.render("Signup");
})
    
app.post("/uploadProfilePicture",function (req, res, next) {
        
    // Error MiddleWare for multer file upload, so if any
    // error occurs, the image would not be uploaded!
    upload(req,res,function(err) {
  
        if(err) {
  
            // ERROR occurred (here it can be occurred due
            // to uploading image of size greater than
            // 1MB or uploading different file type)
            res.send(err)
        }
        else {
  
            // SUCCESS, image successfully uploaded
            res.send("Success, Image uploaded!")
        }
    })
})
    
// Take any port number of your choice which
// is not taken by any other process
app.listen(8080,function(error) {
    if(error) throw error
        console.log("Server created Successfully on PORT 8080")
})

Pasos para ejecutar el programa:

La estructura del proyecto se verá así:

Aquí “cargas” es la carpeta donde se cargarán nuestros archivos, actualmente está vacía. El “Signup.ejs” se guarda en la carpeta de vistas.
Asegúrese de tener ‘view engine’ como he usado «ejs» y también instale express y multer usando los siguientes comandos:
```
npm install ejs
```
```
npm install express
```
```
npm install multer
```
Ejecute el archivo index.js usando el siguiente comando:
```
node index.js
```
Abra el navegador y escriba esta URL:
```
http://localhost:8080/
```
Luego verá el formulario de registro como se muestra a continuación:
Luego elija un archivo para cargar y haga clic en el botón Enviar.
Si se produce un error, se mostrará el siguiente mensaje:

Y si no se produce ningún error, se mostrará el siguiente mensaje:
Si el proceso de carga de archivos se realizó correctamente, puede ir a la carpeta de cargas y ver la imagen cargada como se muestra a continuación:

Entonces, así es como puede cargar un archivo en Node.js usando el módulo multer. Hay otros módulos en el mercado para cargar archivos como fileupload, express-fileupload, etc.

Publicación traducida automáticamente

Artículo escrito por gouravhammad y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta Cancelar la respuesta