Il existe trois manières principales de gérer les téléchargements de fichiers dans Node.js: enregistrer les images directement sur votre serveur, enregistrer les images des données binaires ou des données de chaîne base64 dans votre base de données, et en utilisant des compartiments Amazon Web Service (AWS) S3 pour enregistrer et gérer vos images.
Ici, vous apprendrez à utiliser Multer, un middleware Node.js, pour télécharger et enregistrer des images directement sur votre serveur dans les applications Node.js en quelques étapes.
Étape 1: Configuration de l'environnement de développement
Le code utilisé dans ce projet est disponible dans un Référentiel GitHub et est libre d'utilisation sous la licence MIT.
Tout d'abord, créez un dossier de projet et déplacez-vous dedans en exécutant la commande suivante :
mkdir multer-tutoriel
CD multi-tutoriel
Ensuite, initialisez npm dans votre répertoire de projet en exécutant :
npm init -y
Ensuite, vous devrez installer certaines dépendances. Les dépendances requises pour ce didacticiel incluent :
- Exprimer: Express est un framework Node.js qui fournit un ensemble robuste de fonctionnalités pour les applications Web et mobiles. Il facilite la création d'applications backend avec Node.js.
- Müller: Multer est un middleware express qui simplifie le téléchargement et l'enregistrement des images sur votre serveur.
Installez les packages avec le gestionnaire de paquets de nœud en exécutant:
npm installer exprimer multer
Ensuite, créez un app.js dans le répertoire racine de votre projet et ajoutez le bloc de code ci-dessous pour créer un serveur Express de base :
//app.js
constante exprimer = exiger('exprimer');
constante app = express();
constante port = processus.env. PORT || 3000;
app.listen (port, ()=>{
console.enregistrer(`L'application écoute sur le port ${port}`);
});
Étape 2: Configuration de Multer
Tout d'abord, importez multer dans ton app.js déposer.
constante multer = exiger("multer");
multer nécessite un moteur de stockage qui contient des informations sur le répertoire où les fichiers téléchargés seront stockés et comment les fichiers seront nommés.
UN multer moteur de stockage est créé en appelant le diskStorage méthode sur l'importé multer module. Cette méthode renvoie un Moteur de stockage implémentation configurée pour stocker les fichiers sur le système de fichiers local.
Il prend un objet de configuration avec deux propriétés: destination, qui est une chaîne ou une fonction qui spécifie où les images téléchargées seront stockées.
La deuxième propriété, nom de fichier, est une fonction qui détermine les noms des fichiers téléchargés. Il prend trois paramètres: demande, déposer, et un rappel (cb). demande est l'Express Demande objet, déposer est un objet contenant des informations sur le fichier traité, et cb est un rappel qui détermine les noms des fichiers téléchargés. La fonction de rappel prend l'erreur et le nom de fichier comme arguments.
Ajoutez le bloc de code ci-dessous à votre app.js fichier pour créer un moteur de stockage :
//Paramétrage du moteur de stockage
constante moteur de stockage = multer.diskStorage({
destination: "./images",
nom de fichier: (req, fichier, cb) => {
cb(nul, `${Date.maintenant()}--${file.originalname}`);
},
});
Dans le bloc de code ci-dessus, vous définissez le destination propriété à »./images”, ainsi, les images seront stockées dans le répertoire de votre projet dans un images dossier. Puis, dans le rappel, vous avez passé nul comme erreur et une chaîne de modèle comme nom de fichier. La chaîne de modèle consiste en un horodatage généré en appelant Date.maintenant() pour s'assurer que les noms d'image sont toujours uniques, deux traits d'union pour séparer le nom du fichier et l'horodatage, et le nom d'origine du fichier, accessible depuis le déposer objet.
Les chaînes résultantes de ce modèle ressembleront à ceci: 1663080276614--exemple.jpg.
Ensuite, vous devez initialiser multer avec le moteur de stockage.
Ajoutez le bloc de code ci-dessous à votre app.js fichier pour initialiser multer avec le moteur de stockage :
// initialisation de multer
constante télécharger = multer({
stockage: moteur de stockage,
});
multer renvoie une instance de Multer qui fournit plusieurs méthodes pour générer un middleware qui traite les fichiers téléchargés dans multipart/form-data format.
Dans le bloc de code ci-dessus, vous passez un objet de configuration avec un stockage propriété définie sur moteur de stockage, qui est le moteur de stockage que vous avez créé précédemment.
Actuellement, votre configuration Multer est terminée, mais aucune règle de validation ne garantit que seules les images peuvent être enregistrées sur votre serveur.
Étape 3: Ajouter des règles de validation d'image
La première règle de validation que vous pouvez ajouter est la taille maximale autorisée pour qu'une image soit téléchargée dans votre application.
Mettez à jour votre objet de configuration Multer avec le bloc de code ci-dessous :
constante télécharger = multer({
stockage: moteur de stockage,
limites: { taille du fichier: 1000000 },
});
Dans le bloc de code ci-dessus, vous avez ajouté un limites propriété à l'objet de configuration. Cette propriété est un objet qui spécifie diverses limites sur les données entrantes. Vous définissez le taille du fichier propriété, avec laquelle la taille maximale du fichier en octets est définie sur 1000000, ce qui équivaut à 1 Mo.
Une autre règle de validation que vous pouvez ajouter est la fichierFiltre propriété, une fonction facultative pour contrôler quels fichiers sont téléchargés. Cette fonction est appelée pour chaque fichier traité. Cette fonction prend les mêmes paramètres que la nom de fichier fonction: demande, déposer, et cb.
Pour rendre votre code plus propre et plus réutilisable, vous allez résumer toute la logique de filtrage dans une fonction.
Ajoutez le bloc de code ci-dessous à votre app.js fichier pour implémenter la logique de filtrage de fichiers :
constante chemin = exiger("chemin");
constante checkFileType = fonction (fichier, cb) {
// Extensions de fichiers autorisées
constante types de fichiers = /jpeg|jpg|png|gif|svg/;
//vérifier extension des noms
constante extName = fileTypes.test (path.extname (file.originalname).toLowerCase());
constante mimeType = fileTypes.test (fichier.mimetype);
si (typemime && nom_ext) {
retour cb(nul, vrai);
} autre {
cb("Erreur: Vous ne pouvez télécharger que des images !");
}
};
Le checkFileType fonction prend deux paramètres: déposer et cb.
Dans le bloc de code ci-dessus, vous avez défini un types de fichier variable qui stocke une expression régulière avec les extensions de fichier image autorisées. Ensuite, vous avez appelé le test méthode sur l'expression regex.
Le test la méthode recherche une correspondance dans la chaîne transmise et renvoie vrai ou FAUX selon qu'il trouve ou non une correspondance. Ensuite, vous transmettez le nom du fichier téléchargé, auquel vous pouvez accéder via fichier.nomoriginal, dans le module du chemin nom_ext méthode, qui renvoie l'extension du chemin de la chaîne vers celle-ci. Enfin, vous enchaînez le JavaScript toLowerCase fonction de chaîne à l'expression pour gérer les images avec leurs noms d'extension en majuscules.
Il ne suffit pas de vérifier le nom de l'extension, car les noms d'extension peuvent être facilement modifiés. Pour vous assurer que seules les images sont téléchargées, vous devez cocher la case Type MIME aussi. Vous pouvez accéder à un fichier type mime la propriété à travers le fichier.mimetype. Donc, vous vérifiez le type mime propriété à l'aide de la test méthode comme vous l'avez fait pour les noms d'extension.
Si les deux conditions retournent vraies, vous retournez le rappel avec nul et vrai, ou vous renvoyez le rappel avec une erreur.
Enfin, vous ajoutez le fichierFiltre propriété à votre configuration Multer.
constante télécharger = multer({
stockage: moteur de stockage,
limites: { taille du fichier: 10000000 },
fileFilter: (req, file, cb) => {
checkFileType (fichier, cb);
},
});
Étape 4: Utiliser Multer comme middleware express
Ensuite, vous devez implémenter des gestionnaires de route qui géreront les téléchargements d'images.
Multer peut gérer les téléchargements d'images uniques et multiples en fonction de la configuration.
Ajoutez le bloc de code ci-dessous à votre app.js fichier pour créer un gestionnaire de routage pour les téléchargements d'images uniques :
app.post("/single", upload.single("image"), (req, res) => {
si (demande.déposer) {
res.send("Fichier unique téléchargé avec succès");
} autre {
res.status (400).send("Veuillez télécharger une image valide");
}
});
Dans le bloc de code ci-dessus, vous avez appelé le seul méthode sur la télécharger variable, qui stocke votre configuration de multer. Cette méthode renvoie un middleware qui traite un "fichier unique" associé au champ de formulaire donné. Ensuite, vous avez passé le image comme champ de formulaire.
Enfin, vérifiez si un fichier a été téléchargé via le demande objet dans le déposer propriété. Si c'était le cas, vous envoyez un message de réussite, sinon vous envoyez un message d'erreur.
Ajoutez le bloc de code ci-dessous à votre app.js fichier pour créer un gestionnaire de routage pour plusieurs téléchargements d'images :
app.post("/multiple", upload.array("images", 5), (req, res) => {
si (demande.des dossiers) {
res.send("Plusieurs fichiers téléchargés avec succès");
} autre {
res.status (400).send("Veuillez télécharger une image valide");
}
});
Dans le bloc de code ci-dessus, vous avez appelé le déployer méthode sur la télécharger variable, qui stocke votre configuration de multer. Cette méthode prend deux arguments (un nom de champ et un nombre maximal) et renvoie un middleware qui traite plusieurs fichiers partageant le même nom de champ. Ensuite, tu es passé images comme champ de formulaire partagé et 5 comme nombre maximum d'images pouvant être téléchargées simultanément.
Avantages d'utiliser Multer
L'utilisation de Multer dans vos applications Node.js simplifie le processus autrement compliqué de téléchargement et d'enregistrement d'images directement sur votre serveur. Multer est également basé sur busboy, un module Node.js pour l'analyse des données de formulaire entrantes, ce qui le rend très efficace pour l'analyse des données de formulaire.