Maison > interface Web > js tutoriel > le corps du texte

Gestion des téléchargements de fichiers dans Node.js avec Multer : un guide complet

Mary-Kate Olsen
Libérer: 2024-11-18 10:02:02
original
385 Les gens l'ont consulté

Handling File Uploads in Node.js with Multer: A Comprehensive Guide

Dans le monde du développement Web, la gestion des téléchargements de fichiers est une exigence courante. Qu'il s'agisse de photos de profil, de documents ou d'images, de nombreuses applications doivent télécharger et stocker des fichiers de manière sécurisée et efficace. Lorsque vous utilisez Node.js avec Express, Multer est l'une des meilleures bibliothèques disponibles pour gérer cette tâche en douceur.

Dans ce blog, nous aborderons tout ce que vous devez savoir sur l'utilisation de Multer dans Node.js, y compris l'installation, la configuration, les options de stockage, le filtrage de fichiers et les cas d'utilisation courants avec des exemples de code.


Table des matières

  1. Qu'est-ce que Multer ?
  2. Installation
  3. Configuration de Multer avec Express
  4. Comprendre les options de stockage
    • Stockage sur disque
    • Stockage mémoire
    • Stockage Cloud (exemple S3)
  5. Filtrage des fichiers par type
  6. Limitation de la taille des fichiers
  7. Gestion de plusieurs téléchargements de fichiers
  8. Gestion des erreurs dans Multer
  9. Cas d'utilisation réels
  10. Conclusion

Qu’est-ce que Multer ?

Multer est un middleware pour gérer les données multipart/form, un format couramment utilisé pour télécharger des fichiers dans des applications Web. Il est spécialement conçu pour fonctionner avec Express et aide à gérer les téléchargements de fichiers en fournissant :

  • Stockage de fichiers : options de stockage configurables pour stocker des fichiers sur le serveur ou d'autres services de stockage.
  • Filtrage de fichiers : permet de définir des restrictions sur les types de fichiers.
  • Limitation de la taille : aide à limiter la taille des fichiers pour éviter les téléchargements excessifs de données.

Installation

Pour démarrer avec Multer, installez-le via npm :

npm install multer
Copier après la connexion
Copier après la connexion

Configuration de Multer avec Express

Commençons par configurer un gestionnaire de téléchargement de fichiers de base à l'aide de Multer dans une application Express. Voici comment commencer :

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

// Configure Multer for basic usage
const upload = multer({ dest: 'uploads/' }); // Destination folder for uploaded files

// Single File Upload Route
app.post('/upload', upload.single('file'), (req, res) => {
  res.send('File uploaded successfully!');
});

app.listen(3000, () => console.log('Server running on port 3000'));
Copier après la connexion
Copier après la connexion

Dans cet exemple :

  • upload.single('file') : ce middleware traite un seul fichier téléchargé avec le fichier clé.
  • Les fichiers téléchargés seront stockés dans le dossier uploads/.

Comprendre les options de stockage

Multer propose deux options de stockage principales :

  1. Stockage sur disque : stocke les fichiers localement sur le serveur.
  2. Stockage mémoire : stocke les fichiers en mémoire sous forme d'objets Buffer (utile pour traiter les fichiers en mémoire).

1. Stockage sur disque

Le stockage sur disque offre plus de contrôle sur la dénomination des fichiers et les chemins de destination.

npm install multer
Copier après la connexion
Copier après la connexion
  • destination : Spécifie le dossier pour les téléchargements de fichiers.
  • nom de fichier : permet de personnaliser le nom du fichier (par exemple, en ajoutant un horodatage pour plus d'unicité).

2. Stockage de la mémoire

Dans le stockage en mémoire, les fichiers sont stockés sous forme de tampons, ce qui est utile pour les fichiers de courte durée ou pour gérer les téléchargements sans enregistrer les fichiers sur le disque.

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

// Configure Multer for basic usage
const upload = multer({ dest: 'uploads/' }); // Destination folder for uploaded files

// Single File Upload Route
app.post('/upload', upload.single('file'), (req, res) => {
  res.send('File uploaded successfully!');
});

app.listen(3000, () => console.log('Server running on port 3000'));
Copier après la connexion
Copier après la connexion

Stockage cloud : Multer avec AWS S3

Pour les applications de production, stocker les fichiers directement sur un stockage cloud (comme AWS S3) est souvent préférable. Pour intégrer S3, utilisez multer-s3.

const storage = multer.diskStorage({
  destination: (req, file, cb) => cb(null, 'uploads/'), // Folder location
  filename: (req, file, cb) => {
    const uniqueSuffix = Date.now() + '-' + Math.round(Math.random() * 1E9);
    cb(null, uniqueSuffix + '-' + file.originalname);
  }
});

const upload = multer({ storage: storage });
Copier après la connexion
const upload = multer({ storage: multer.memoryStorage() });
Copier après la connexion

Cette configuration téléchargera les fichiers directement dans le compartiment S3 spécifié, en contournant le stockage local.


Filtrage des fichiers par type

Vous pouvez filtrer les fichiers par type pour accepter uniquement des formats de fichiers spécifiques (par exemple, des images). Utilisez l'option fileFilter.

npm install aws-sdk multer-s3
Copier après la connexion

Limiter la taille du fichier

Pour empêcher le téléchargement de fichiers volumineux, définissez une option de limites. Voici comment limiter la taille du fichier à 1 Mo :

const aws = require('aws-sdk');
const multerS3 = require('multer-s3');

aws.config.update({ region: 'your-region' });

const s3 = new aws.S3();

const upload = multer({
  storage: multerS3({
    s3: s3,
    bucket: 'your-s3-bucket-name',
    metadata: (req, file, cb) => cb(null, { fieldName: file.fieldname }),
    key: (req, file, cb) => cb(null, Date.now().toString() + '-' + file.originalname)
  })
});
Copier après la connexion

Gestion de plusieurs téléchargements de fichiers

Multer prend également en charge plusieurs téléchargements de fichiers :

const fileFilter = (req, file, cb) => {
  // Accept only image files
  if (file.mimetype.startsWith('image/')) {
    cb(null, true); // Accept file
  } else {
    cb(new Error('Only image files are allowed!'), false); // Reject file
  }
};

const upload = multer({
  storage: storage,
  fileFilter: fileFilter
});
Copier après la connexion
  • upload.array('files', 5) : permet de télécharger jusqu'à 5 fichiers dans le même champ.
  • upload.fields : permet de gérer des fichiers avec des noms de champs différents.

Gestion des erreurs dans Multer

Une gestion appropriée des erreurs est cruciale pour une expérience utilisateur fluide. Multer peut générer plusieurs types d'erreurs, que vous pouvez gérer comme ceci :

const upload = multer({
  storage: storage,
  limits: { fileSize: 1 * 1024 * 1024 } // 1 MB limit
});
Copier après la connexion

Cas d'utilisation réels

Voici quelques applications concrètes pour utiliser Multer :

  1. Téléchargement d'image de profil : permet aux utilisateurs de télécharger des photos de profil, de les stocker sur le serveur ou dans S3 et d'enregistrer le chemin du fichier dans une base de données.
  2. Stockage de documents : stockez les documents soumis par les utilisateurs (par exemple, CV, PDF) avec des configurations de stockage et de filtrage personnalisées.
  3. Fichiers multimédias dans le commerce électronique : permettez aux fournisseurs de télécharger des images de produits, de limiter les types et les tailles de fichiers et de les stocker sur le stockage cloud pour une récupération facile.

Conclusion

Multer simplifie la gestion des fichiers dans les applications Node.js en fournissant des options de stockage flexibles, le filtrage des fichiers et la gestion de diverses exigences de téléchargement, depuis des fichiers uniques jusqu'à plusieurs fichiers. Que vous créiez une petite application ou une application de production avec des besoins de gestion de fichiers, Multer a ce qu'il vous faut.

Bon codage ! ?

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

source:dev.to
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal