Node.js - Téléversement de fichiers : Un guide pour les débutants

Bonjour là-bas, future star du codage ! Bienvenue dans notre voyage passionnant dans le monde du téléversement de fichiers avec Node.js. En tant que votre enseignant informatique du coin, je suis ravi de vous guider à travers cette aventure. Ne vous inquiétez pas si vous n'avez jamais écrit une ligne de code auparavant - nous allons commencer de zéro et construire notre chemin. À la fin de ce tutoriel, vous téléverserez des fichiers comme un pro !

Introduction au téléversement de fichiers dans Node.js

Avant de plonger dans les détails, parlons pourquoi le téléversement de fichiers est important. Imaginez que vous créez une application de réseaux sociaux où les utilisateurs peuvent partager des photos. Ou peut-être que vous construisez un système de gestion des documents pour une entreprise. Dans les deux cas, vous avez besoin d'un moyen pour les utilisateurs d'envoyer des fichiers à votre serveur. C'est là que rentre en jeu le téléversement de fichiers !

Node.js, notre fidèle environnement d'exécution JavaScript, offre plusieurs façons de gérer les téléversements de fichiers. Aujourd'hui, nous nous concentrerons sur deux bibliothèques populaires : Formidable et Multer. Pensez à ces deux comme vos super-héros du téléversement de fichiers, chacun avec ses propres super-pouvoirs !

Formidable : Votre Premier Assistant de Téléversement

Qu'est-ce que Formidable ?

Formidable est comme ce ami fiable qui est toujours là pour vous aider à déménager. C'est un module Node.js qui rend l'analyse des données de formulaires, en particulier les téléversements de fichiers, une breeze. Voyons comment l'utiliser !

Configuration de Formidable

Premièrement, nous devons installer Formidable. Ouvrez votre terminal et tapez :

npm install formidable

Cette commande est comme aller dans le magasin de super-héros et picking up votre costume Formidable. Maintenant, vous êtes prêt à commencer le téléversement !

Téléversement de Fichier de Base avec Formidable

Créons un serveur simple qui peut gérer les téléversements de fichiers. Voici le code :

const http = require('http');
const formidable = require('formidable');
const fs = require('fs');

http.createServer((req, res) => {
if (req.url == '/fileupload') {
const form = new formidable.IncomingForm();
form.parse(req, (err, fields, files) => {
const oldPath = files.filetoupload.filepath;
const newPath = 'C:/Users/YourName/uploads/' + files.filetoupload.originalFilename;
fs.rename(oldPath, newPath, (err) => {
if (err) throw err;
res.write('Fichier téléversé et déplacé !');
res.end();
});
});
} else {
res.writeHead(200, {'Content-Type': 'text/html'});
res.write('<form action="fileupload" method="post" enctype="multipart/form-data">');
res.write('<input type="file" name="filetoupload"><br>');
res.write('<input type="submit">');
res.write('</form>');
return res.end();
}
}).listen(8080);

Reprenons cela :

1. Nous créons un serveur en utilisant http.createServer().
2. Si l'URL est '/fileupload', nous utilisons Formidable pour analyser le formulaire entrant.
3. Nous déplaçons le fichier téléversé de son emplacement temporaire à un emplacement permanent.
4. Si l'URL est autre chose, nous affichons un simple formulaire de téléversement.

Gestion du Téléversement de Multiples Fichiers

Que se passe-t-il si vous souhaitez téléverser plusieurs fichiers à la fois ? Pas de problème ! Voici comment modifier le code :

const http = require('http');
const formidable = require('formidable');
const fs = require('fs');

http.createServer((req, res) => {
if (req.url == '/fileupload') {
const form = new formidable.IncomingForm();
form.multiples = true;
form.parse(req, (err, fields, files) => {
if (Array.isArray(files.filetoupload)) {
files.filetoupload.forEach((file) => {
const oldPath = file.filepath;
const newPath = 'C:/Users/YourName/uploads/' + file.originalFilename;
fs.rename(oldPath, newPath, (err) => {
if (err) throw err;
});
});
} else {
const oldPath = files.filetoupload.filepath;
const newPath = 'C:/Users/YourName/uploads/' + files.filetoupload.originalFilename;
fs.rename(oldPath, newPath, (err) => {
if (err) throw err;
});
}
res.write('Fichiers téléversés et déplacés !');
res.end();
});
} else {
res.writeHead(200, {'Content-Type': 'text/html'});
res.write('<form action="fileupload" method="post" enctype="multipart/form-data">');
res.write('<input type="file" name="filetoupload" multiple><br>');
res.write('<input type="submit">');
res.write('</form>');
return res.end();
}
}).listen(8080);

Les principales modifications ici sont :

1. Nous définissons form.multiples = true pour permettre le téléversement de plusieurs fichiers.
2. Nous vérifions si files.filetoupload est un tableau (plusieurs fichiers) ou un objet (fichier unique).
3. Nous utilisons forEach pour gérer plusieurs fichiers si nécessaire.

Multer : Le Nouveau Venu sur le Block

Introduction à Multer

Maintenant, rencontrons notre second super-héros du téléversement de fichiers : Multer. Multer est comme le frère plus jeune et plus cool de Formidable. Il est conçu spécifiquement pour gérer multipart/form-data, ce qui est parfait pour les téléversements de fichiers.

Configuration de Multer

Pour commencer avec Multer, installez-le en utilisant npm :

npm install multer

Téléversement de Fichier de Base avec Multer

Voici un exemple simple de comment utiliser Multer :

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

const app = express();

const storage = multer.diskStorage({
destination: function (req, file, cb) {
cb(null, 'uploads/')
},
filename: function (req, file, cb) {
cb(null, file.fieldname + '-' + Date.now() + path.extname(file.originalname))
}
});

const upload = multer({ storage: storage });

app.get('/', (req, res) => {
res.sendFile(__dirname + '/index.html');
});

app.post('/upload', upload.single('filetoupload'), (req, res, next) => {
const file = req.file;
if (!file) {
const error = new Error('Veuillez téléverser un fichier');
error.httpStatusCode = 400;
return next(error);
}
res.send(file);
});

app.listen(3000, () => console.log('Serveur démarré sur le port 3000'));

Reprenons cela :

1. Nous configurons un moteur de stockage qui indique à Multer où stocker les fichiers et comment les nommer.
2. Nous créons une instance de téléversement en utilisant nos paramètres de stockage.
3. Nous définissons une route pour le formulaire de téléversement et une autre pour gérer le téléversement de fichiers.
4. Dans la route de téléversement, nous utilisons upload.single('filetoupload') pour gérer un téléversement de fichier unique.

Gestion du Téléversement de Multiples Fichiers avec Multer

Multer rend la gestion du téléversement de plusieurs fichiers extrêmement facile. Voici comment :

app.post('/upload', upload.array('filetoupload', 12), (req, res, next) => {
const files = req.files;
if (!files) {
const error = new Error('Veuillez choisir des fichiers');
error.httpStatusCode = 400;
return next(error);
}
res.send(files);
});

La modification clé ici est l'utilisation de upload.array('filetoupload', 12) au lieu de upload.single(). Le '12' spécifie un maximum de 12 fichiers.

Comparaison de Formidable et Multer

Maintenant que nous avons vu Formidable et Multer en action, comparons-les :

Fonctionnalité	Formidable	Multer
Facilité d'utilisation	Simple et direct	Nécessite plus de configuration mais offre plus de contrôle
Intégration	Travaille avec n'importe quel serveur Node.js	Conçu pour fonctionner avec Express
Gestion des fichiers	Peut gérer à la fois des fichiers et des champs	Spécifiquement conçu pour les téléversements de fichiers
Personnalisation	Moins flexible	Hautement personnalisable
Téléversement de plusieurs fichiers	Nécessite du code supplémentaire	Support intégré

Conclusion

Félicitations ! Vous avez juste amélioré vos compétences Node.js en apprenant à gérer les téléversements de fichiers. Que vous choisissiez Formidable pour sa simplicité ou Multer pour sa puissance et sa flexibilité, vous êtes maintenant équipé pour ajouter la fonctionnalité de téléversement de fichiers à vos applications Node.js.

Souvenez-vous, la pratique rend parfait. Essayez de construire un petit projet qui utilise des téléversements de fichiers - peut-être une application simple de partage d'images ou un système de stockage de documents. Plus vous codez, plus vous deviendrez à l'aise avec ces concepts.

Bonne programmation, et que vos téléversements soient toujours réussis !

Credits: Image by storyset