Comment télécharger des images dans Node.js en utilisant Multer

Il existe trois grands moyens de traiter les soumissions de données dans Node.js : conserver les images directement sur votre serveur web, enregistrer les informations binaires de l’image ou les informations de la chaîne base64 sur votre source de données, ainsi que faire usage des buckets S3 d’Amazon Web Service (AWS) pour enregistrer et également traiter vos images.

Vous découvrirez ici comment utiliser Multer, un middleware Node.js, pour télécharger et enregistrer des images directement sur votre serveur dans des applications Node.js en quelques étapes.

Étape 1 : Configuration de l’environnement de développement

Le code utilisé dans ce projet est disponible dans une base de données GitHub et est également totalement libre pour que vous puissiez l’utiliser sous le permis MIT.

Tout d’abord, développez un dossier de projet et aussi déplacez-vous directement dans celui-ci en exécutant la commande suivante :

Ensuite, initialisez npm dans votre site de répertoire de tâches en exécutant :

Ensuite, vous aurez besoin de monter certaines dépendances. Les dépendances requises pour ce tutoriel comprennent :

• Express : Express est un framework Node.js qui offre un ensemble durable d’attributs pour les applications internet ainsi que pour les applications mobiles. Il facilite la construction d’applications backend avec Node.js.
• Multer : Multer est un middleware express qui rationalise la publication et la conservation des photos sur votre serveur.

Installez les paquets avec le superviseur de bundle de nœuds en exécutant :

Ensuite, développez un app. js dans le site du répertoire d’origine de votre travail et incluez le bloc de code indiqué ci-dessous pour créer un serveur Express fondamental :

Étape 2 : Configuration de Multer

Tout d’abord, importez multer dans votre app. js documents.

multer nécessite un moteur de stockage qui contient des détails concernant le site du répertoire où les données téléchargées seront certainement enregistrées ainsi que la façon dont les fichiers seront certainement nommés.

A multer est développé en appelant le moteur de stockage diskStorage sur la technique importée multer importé. Cette méthode renvoie un StorageEngine implémentation configurée pour conserver les fichiers sur le système de données du quartier.

Il prend une chose d’arrangement avec deux propriétés résidentielles : destination , qui est une chaîne de caractères ou une fonction qui définit l’endroit où les photos téléchargées seront stockées.

La 2e maison, nom de fichier , est une fonction qui détermine les noms des données téléchargées. Elle prend 3 spécifications : req , fichier et un rappel (cb ). req est l’express Demande des choses, fichier est un objet contenant des informations concernant le fichier traité, et cb est un callback qui détermine les noms des fichiers téléchargés. La fonction de callback prend erreur et nom de fichier comme désaccords.

Ajoutez le bloc de code indiqué ci-dessous à votre app. js soumettre pour développer un moteur de stockage :

Dans le bloc de code ci-dessus, vous avez établi le destination à la maison pour « ./ images « , par conséquent, les images seront sauvegardées dans le site de répertoire de votre tâche dans un fichier images dossier. Ensuite, dans le callback, vous avez passé null comme erreur et également une chaîne de modèle de conception comme nom de données. La chaîne de thème consiste en un horodatage créé en appelant Date. now() pour s’assurer que les noms d’images sont constamment uniques, de deux traits d’union pour séparer le nom de fichier et l’horodatage, et aussi du nom initial des données, auquel on peut accéder à partir de l’élément fichier élément.

Les chaînes de caractères résultant de ce modèle ressembleront certainement à ceci : 1663080276614– exemple.jpg .

Ensuite, vous devez initialiser multer avec le moteur d’espace de stockage.

Ajoutez le bloc de code ci-dessous à votre app. js soumettre pour démarrer multer avec le moteur de stockage :

multer renvoie une instance Multer qui donne de nombreuses approches pour générer des intergiciels qui affinent les données postées en multipart/ form-data layout.

Dans le bloc de code ci-dessus, vous passez un objet d’arrangement avec une balise stockage définie sur storageEngine , qui est le moteur d’espace de stockage que vous avez produit précédemment.

Actuellement, votre configuration Multer est totale, cependant il n’existe pas de règles de reconnaissance qui garantissent que seules les photos peuvent être économisées de l’argent sur votre serveur web.

Étape 3 : ajout de règles de validation des images

La politique de validation initiale que vous pouvez ajouter est la taille maximale permettant à une photo d’être soumise à votre application.

Mettez à jour vos choses de configuration multer avec le bloc de code ci-dessous :

Dans le bloc de code ci-dessus, vous avez inclus un limites building à l’objet arrangement. Ce bâtiment est un objet qui spécifie de nombreuses limites sur les informations entrantes. Vous définissez le bâtiment fileSize propriété, avec laquelle la taille limite des données en octets est fixée à 1000000, ce qui est équivalent à 1MB.

Une autre ligne directrice de validation que vous pouvez inclure est le fileFilter propriété résidentielle, une fonction optionnelle pour gérer les documents qui sont soumis. Cette fonction est requise chaque fois que des données sont affinées. Cette fonction prend les mêmes critères que la fonction nom de fichier caractéristique : req , fichier et cb .

Pour rendre votre code plus propre ainsi que beaucoup plus réutilisable, vous allez abstraire tout le raisonnement de filtrage dans une fonctionnalité.

Ajoutez le bloc de code indiqué ci-dessous à votre app. js pour exécuter le raisonnement du système de filtrage des fichiers :

Le site checkFileType prend deux spécifications : fichier ainsi que cb .

Dans le bloc de code ci-dessus, vous avez spécifié un fileTypes variable qui stocke une expression regex avec les extensions de fichiers d’image autorisées. Ensuite, vous avez appelé la variable test sur l’expression regex.

Le site test vérifie s’il y a une correspondance dans la chaîne de caractères passée et retourne également vrai ou faux en fonction de la localisation d’une combinaison. Après cela, vous passez le nom des données téléchargées, auquel vous pouvez accéder avec la fonction fichier. nom original , directement dans le module du cours extname qui renvoie l’extension de la chaîne de caractères du cours. Enfin, vous enchaînez la méthode JavaScript toLowerCase string à l’expression pour gérer les images dont les noms d’extension sont en majuscules.

La vérification du nom d’extension seul est inadéquate, car les noms d’extension peuvent être modifiés de manière pratique. Pour garantir que seules les images sont téléchargées, il faut inspecter la chaîne de caractères type MIME également. Vous pouvez accéder au type de fichier mimetype d’un fichier avec la propriété fichier. mimetype . Donc, vous cherchez le fichier mimetype maison en utilisant le test comme vous l’avez prévu pour les noms des extensions.

Si les deux problèmes retournent réels, vous retournez la callback avec la méthode null et également vrai, ou vous retournez le callback avec une erreur.

Enfin, vous incluez le fileFilter building à votre configuration multer.

Étape 4 : Utilisation de Multer en tant que middleware express

Ensuite, vous devez mettre en œuvre des gestionnaires de cours qui vont gérer les téléchargements de photos.

Multer peut prendre en charge les soumissions d’une seule et de plusieurs images selon la configuration.

Ajoutez le bloc de code ci-dessous à votre app. js pour développer un formateur de route pour les téléchargements de photos uniques :

Dans le bloc de code ci-dessus, vous avez appelé le fichier unique sur l’objet téléchargement variable, qui stocke votre arrangement de multer. Cette méthode renvoie un middleware qui traite un « fichier unique » lié au champ de type fourni. Après cela, vous avez passé la variable image comme zone de formulaire.

Enfin, examinez si un fichier a été affiché via l’option req dans la section fichier propriété. Si c’est le cas, vous envoyez un message de réussite, sinon vous envoyez un message d’erreur.

Ajoutez le bloc de code indiqué ci-dessous à votre app. js soumettre pour créer un formateur de cours pour plusieurs téléchargements de photos :

Dans le bloc de code ci-dessus, vous avez appelé l’application tableau sur l’approche téléchargement qui stocke votre configuration de multer. Cette approche prend 2 arguments – un nom de champ et un nombre maximal – et renvoie un intergiciel qui traite de nombreux fichiers partageant le même nom de champ. Après cela, vous avez passé images comme champ de type partagé ainsi que 5 comme nombre optimal de photos pouvant être téléchargées en même temps.

Avantages de l’utilisation de Multer

L’utilisation de Multer dans vos applications Node.js rationalise le processus autrement compliqué d’affichage ainsi que de conservation des photos directement sur votre serveur web. Multer est également basé sur busboy, un module Node.js pour analyser les données de type entrantes, ce qui le rend vraiment efficace pour analyser les informations de type.