Lors de la création d’API, il est nécessaire de télécharger des fichiers, qui peuvent être des images, des documents texte, des scripts, des PDF, entre autres. Dans le développement de cette fonctionnalité, certains problèmes peuvent être trouvés, tels que le nombre de fichiers, les types de fichiers valides, les tailles de ces fichiers et plusieurs autres. Et pour nous sauver de ces problèmes, nous avons la bibliothèque Multer. Multer est un nœud.middleware js pour la gestion de multipart/form-data qui est utilisé pour envoyer des fichiers dans des formulaires.

Premières étapes

La première étape consiste à créer un projet NodeJS sur votre ordinateur.

Ajout d’Express

Dans votre terminal, tapez la commande suivante:

yarn add express

* Vous pouvez également utiliser NPM pour l’installation

Créer un fichier nommé app.js dans le dossier src/. L’étape suivante consiste à démarrer notre serveur Express dans notre app.js

const express = require("express")const app = express()app.listen(3000 || process.env.PORT, () => { console.log("Server on...")})

Ajout de Multer

Avec le projet créé, configuré et avec Express installé, nous ajouterons le multer à notre projet.

yarn add multer

L’étape suivante consiste à importer le multer dans notre fichier app.js.

const multer = require("multer")

Nous y sommes presque. Créez maintenant un dossier appelé uploads où nous stockerons les fichiers téléchargés.

Configuration et validation du téléchargement

Maintenant, nous en sommes à une étape très importante qui est la configuration de diskStorage. DiskStorage est une méthode mise à disposition par multer où nous configurons la destination du fichier, le nom du fichier et nous pouvons également ajouter des validations concernant le type du fichier. Ces paramètres sont en fonction des besoins de votre projet. Ci-dessous, je vais laisser un exemple élémentaire de la configuration.

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

Dans la configuration ci-dessus, nous avons mentionné la destination des fichiers téléchargés et avons également changé le nom du fichier.

Fournir une route de téléchargement

const uploadStorage = multer({ storage: storage })// Single fileapp.post("/upload/single", uploadStorage.single("file"), (req, res) => { console.log(req.file) return res.send("Single file")})//Multiple filesapp.post("/upload/multiple", uploadStorage.array("file", 10), (req, res) => { console.log(req.files) return res.send("Multiple files")})

Dans l’extrait de code ci-dessus, nous avons créé 2 routes de publication pour l’envoi de fichiers. La première route /upload/single ne reçoit qu’un seul fichier, notez que la variable uploadStorage reçoit nos paramètres diskStorage. En tant que middleware dans la route, il appelle la méthode single pour télécharger un seul fichier. La route /upload/multiple reçoit plusieurs fichiers, mais avec une limite maximale de 10 fichiers, notez que la variable uploadStorage appelle désormais la méthode array` pour télécharger plusieurs fichiers.

La fin

Avec tous les réglages effectués, notre petite API est déjà capable de stocker les fichiers envoyés.

const express = require("express")const multer = require("multer")const app = express()const storage = multer.diskStorage({ destination: (req, file, cb) => { cb(null, "uploads/") }, filename: (req, file, cb) => { cb(null, Date.now() + "-" + file.originalname) },})const uploadStorage = multer({ storage: storage })// Single fileapp.post("/upload/single", uploadStorage.single("file"), (req, res) => { console.log(req.file) return res.send("Single file")})//Multiple filesapp.post("/upload/multiple", uploadStorage.array("file", 10), (req, res) => { console.log(req.files) return res.send("Multiple files")})app.listen(3000 || process.env.PORT, () => { console.log("Server on...")})

Maintenant c’est à vous de décider!

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée.