ExpressJS:upload multiple files

Afin d'upload files dans le serveurs on doit :
  1. Créer le dossier publics/uploads dans la racine
  2. Spécifier dans le serveur que le dossier publics/uploads est statique
  3. Installer un module qui permet de télécharger les fichiers ,file_upload ou multer

Installer multer

npm install multer --save
Exemple 1:upload single file
app.js
const express = require('express');
// Importe les modules nécessaires
const express = require('express');
const multer = require('multer'); // Middleware pour gérer l'upload de fichiers
const path = require('path');
const app = express();

// Configuration de multer pour spécifier le dossier de destination des fichiers uploadés
const storage = multer.diskStorage({
  destination: function (req, file, cb) {
    cb(null, 'uploads/'); // Spécifie le dossier de destination des fichiers uploadés
	/*
	function cb(error: Error | null, destination: string): void;
	(callback) est une fonction fournie par Multer pour signaler la fin du traitement du fichier pendant le processus d'upload
	*/
  },
  filename: function (req, file, cb) {
    const ext = path.extname(file.originalname); // Récupère l'extension du fichier
    cb(null, Date.now() + ext); // Génère un nom unique pour le fichier basé sur la date
  }
});

const upload = multer({ storage: storage }); // Initialise multer avec la configuration de stockage

// Route pour afficher le formulaire d'upload
app.get('/', (req, res) => {
  res.send(`
    <form method="post" action="/upload" enctype="multipart/form-data">
      <input type="file" name="file" required>
      <button type="submit">Upload</button>
    </form>
  `);
});

// Route pour traiter l'upload de fichier
app.post('/upload', upload.single('file'), (req, res) => {
  if (req.file) {
    res.send('Fichier uploadé avec succès.'); // Envoie un message de succès si un fichier a été uploadé
  } else {
    res.status(400).send('Aucun fichier sélectionné.'); // Envoie un message d'erreur si aucun fichier n'a été sélectionné
  }
});

// Démarrage du serveur sur le port 3000
const PORT = 3000;
app.listen(PORT, () => {
  console.log(`Serveur Express en cours d'exécution sur le port ${PORT}`);
});
Exemple 2:upload single file avec vérification
Autoriser uniquement les fichiers avec l'extension .jpg et une taille maximale de 1 Mo.
app.js
const express = require('express');
const express = require('express');
const multer = require('multer');
const path = require('path');
const app = express();

// Configuration de multer avec des vérifications personnalisées
const storage = multer.diskStorage({
  destination: function (req, file, cb) {
    cb(null, 'uploads/');
  },
  filename: function (req, file, cb) {
    const ext = path.extname(file.originalname);
    cb(null, Date.now() + ext);
  }
});

const fileFilter = (req, file, cb) => {
  // Vérifie l'extension du fichier
  const allowedExtensions = ['.jpg'];
  const ext = path.extname(file.originalname).toLowerCase();
  if (allowedExtensions.includes(ext)) {
    cb(null, true);
  } else {
    cb(new Error('Extension de fichier non autorisée. Utilisez une extension .jpg.'), false);
  }
};

const fileSizeLimit = 1 * 1024 * 1024; // Limite de taille du fichier : 1 Mo

const upload = multer({
  storage: storage,
  fileFilter: fileFilter,
  limits: { fileSize: fileSizeLimit }
});

// Route pour afficher le formulaire d'upload
app.get('/', (req, res) => {
  res.send(`
    <form method="post" action="/upload" enctype="multipart/form-data">
      <input type="file" name="file" required>
      <button type="submit">Upload</button>
    </form>
  `);
});

// Route pour traiter l'upload de fichier
app.post('/upload', upload.single('file'), (req, res) => {
  if (req.file) {
    res.send('Fichier uploadé avec succès.');
  } else {
    res.status(400).send('Aucun fichier sélectionné ou fichier non autorisé.');
  }
});

// Gestion des erreurs multer
app.use((err, req, res, next) => {
  if (err instanceof multer.MulterError) {
    // Erreur liée à Multer (par exemple, taille maximale dépassée)
    res.status(400).send(`Erreur Multer: ${err.message}`);
  } else if (err) {
    // Autre type d'erreur
    res.status(500).send(`Erreur: ${err.message}`);
  } else {
    next();
  }
});

// Démarrage du serveur sur le port 3000
const PORT = 3000;
app.listen(PORT, () => {
  console.log(`Serveur Express en cours d'exécution sur le port ${PORT}`);
});
Exemple 3:upload multi-files
app.js
const express = require('express');
const multer = require('multer');
const path = require('path');
const app = express();

// Configuration de multer avec des vérifications personnalisées pour l'upload de plusieurs fichiers
const storage = multer.diskStorage({
  destination: function (req, file, cb) {
    cb(null, 'uploads/');
  },
  filename: function (req, file, cb) {
    const ext = path.extname(file.originalname);
    cb(null, Date.now() + ext);
  }
});

const fileFilter = (req, file, cb) => {
  // Vérifie l'extension du fichier
  const allowedExtensions = ['.jpg', '.jpeg', '.png'];
  const ext = path.extname(file.originalname).toLowerCase();
  if (allowedExtensions.includes(ext)) {
    cb(null, true);
  } else {
    cb(new Error('Extension de fichier non autorisée. Utilisez .jpg, .jpeg ou .png.'), false);
  }
};

const fileSizeLimit = 1 * 1024 * 1024; // Limite de taille du fichier : 1 Mo

const upload = multer({
  storage: storage,
  fileFilter: fileFilter,
  limits: { fileSize: fileSizeLimit }
}).array('files', 5); // 'files' est le nom du champ de formulaire pour les fichiers, 5 est le nombre maximal de fichiers

// Route pour afficher le formulaire d'upload de plusieurs fichiers
app.get('/', (req, res) => {
  res.send(`
    <form method="post" action="/upload" enctype="multipart/form-data">
      <input type="file" name="files" accept=".jpg, .jpeg, .png" multiple required>
      <button type="submit">Upload</button>
    </form>
  `);
});

// Route pour traiter l'upload de plusieurs fichiers
app.post('/upload', (req, res) => {
  upload(req, res, function (err) {
    if (err instanceof multer.MulterError) {
      // Gestion des erreurs liées à Multer
      res.status(400).send(`Erreur Multer: ${err.message}`);
    } else if (err) {
      // Autre type d'erreur
      res.status(500).send(`Erreur: ${err.message}`);
    } else if (!req.files || req.files.length === 0) {
      // Aucun fichier sélectionné
      res.status(400).send('Aucun fichier sélectionné.');
    } else {
      // Fichiers uploadés avec succès
      res.send('Fichiers uploadés avec succès.');
    }
  });
});

// Démarrage du serveur sur le port 3000
const PORT = 3000;
app.listen(PORT, () => {
  console.log(`Serveur Express en cours d'exécution sur le port ${PORT}`);
});

Exemple 4:upload multi-files

Serveur.js

const express = require('express');
const multer = require('multer');
const path = require('path');
const app = express();
 
/*public est un dossier dans la racine du projet contenant les ressources statiques*/
app.use(express.static('publics'));

//télécharger des fichier avec multer
const storage = multer.diskStorage({
    destination: function(req, file, cb) {
        cb(null, 'publics/uploads/');
    },
 
    filename: function(req, file, cb) {
        cb(null, file.fieldname + '-' + Date.now() + path.extname(file.originalname));
    }
});
 
 
var upload = multer({ storage: storage })
 
 
//créer une route pour affficher le formulaire  
app.get('/upload', (req, res) => {
  res.sendFile(__dirname + '/views/upload.html');
});
 
//récuppérer les fichiers envoyer par le client
app.post('/save', upload.array('multi-files'), (req, res) => {
  res.redirect('/upload');
});
 
app.listen(8081);

views/upload.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <title></title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
  </head>
  <body>
    <h1></h1>
    <form action="/save" enctype="multipart/form-data" method="post">
      <input type="file" name="multi-files" multiple>
      <input type="submit" value="Upload">
    </form>  
  </body>
</html>

Run

node Serveur.js








Cours et TPs