Comment créer un formulaire HTML de base télécharger des fichiers sur votre serveur à l'aide de Multer dans un Node.js / Express App

Ce que nous construisons aujourd'hui.

Récemment, j’ai décidé d’aborder le concept de permettre aux utilisateurs de mon application Web express de télécharger leurs propres photos sur leur compte pour les avatars de leurs profils et les produits qu’ils téléchargeront. Si vous voulez faire la même chose et envisagez d’utiliser Node.js / Express, continuez à lire.

Comment je pense que mon application devrait y arriver
À l'arrière, je veux stocker leurs photos dans une solution de stockage en nuage, puis stocker des données sur leurs images dans ma base de données MongoDB. (telles que l’URL, la taille du fichier, les proportions largeur et hauteur, et d’autres éléments amusants comme le format hexadécimal commun des couleurs de base que contient l’image pour créer d’incroyables outils de recherche)

REMARQUE: Ce tutoriel ne couvre que les portions JAUNE.
Cela semble assez facile, non!? … Bwahaha!

Rêver de code je vais écrire pour cela…
A. Téléchargez les photos de l’utilisateur dans un dossier de stockage temporaire sur mon serveur (contenu de ce tutoriel)
Un utilisateur télécharge une photo, mon backend la place dans un dossier local et fournit une URL à cet emplacement de stockage local.

B. Mon application transfère ensuite ce fichier dans le cloud (avec AJAX)
Mon serveur dorsal prend ensuite cette photo et la place dans le stockage en nuage via une demande de post AJAX, avec un rappel incluant l'url du fichier dans le nuage.

C. Mon application reçoit l’url de l’emplacement dans le nuage de la photo, puis les données de la photo et de mon utilisateur dans la base de données Mongo.
Lorsque cela est terminé, j’envoie toutes les données pertinentes avec cette URL dans la base de données de mon application - et je réalise toutes sortes de magie géniale!

Inclus dans ce tutoriel

Après avoir vérifié et essayé (trop d’inutiles) de solutions en mangeant du stress, des biscuits aux pépites de chocolat, j’ai enfin trouvé un exemple qui a réellement fonctionné pour la partie A de ce code de rêve que j’ai eu et j’ai donc été obligé d’écrire ce tutoriel pour le reste du monde. nous stress en ligne manger des cookies et vouloir résoudre ce problème.

  • Un lien fabuleux vers mon dépôt démo de github!
    https://github.com/Lazercat/node-express-file-form-upload-demo
  • Attendez-vous bien que vous sachiez déjà comment créer / configurer une application web node.js / express.
  • Un déni de responsabilité étonnant expliquant que cela ne comprend que le polissage de base de fichiers et que vous êtes responsable (comme d’habitude) de mettre en œuvre vos propres solutions de sécurité. Cette solution fonctionne, mais je ne prétends pas être un expert en sécurité.
  • Des captures d'écran fantastiques et un commentaire de code ringard de ce que nous construisons!

Utiliser mon fichier de projet de démonstration (comme un patron)

1FORK / CLONE
Allez sur github et clonez ou branchez / clonez… (si vous voulez m'aider à améliorer, (oui, s'il vous plait!))… Mon répertoire de démonstration de cette solution. https://github.com/Lazercat/node-express-file-form-upload-demo.

2INSTALL NPM PACKAGES
 Une fois cloné localement, exécutez une installation npm à partir de votre ligne de commande (bash / terminal) dans le dossier racine où se trouve App.js.

npm installer

3RUN L'APP
 J'ai inclus le paquet nodemon dans ce projet, donc pour exécuter cette solution sur votre hôte local, tapez simplement le code suivant. Au fur et à mesure que vous apportez des modifications, nodemon le relancera automatiquement pour vous -neato, hein?

nodemon App.js

4 Rendez-vous sur http: // localhost: 3000 dans votre navigateur Web pour découvrir cette solution smokin ’hot!

Voyons les dépendances de l’application! (comme un nerd)

Partie 1) Dépendances et configuration de base de votre serveur APP.JS.

/ * Fichier App.js * /
// PACKAGES RUN
  const express = require ('express'); // routeur de l'application
  const multer = require ('multer'); // fichier middleware de stockage
  const bodyParser = require ('analyseur de corps'); // nettoie notre corps requis
// SETUP APP
  const app = express (); // Ceci est une application express
  const port = process.env.PORT || 3000; // préconfigure votre port!
  app.use (bodyParser.urlencoded ({extended: false})); // gérer les demandes de corps
  app.use (bodyParser.json ()); // faisons fonctionner JSON aussi!
  app.use ('/', express.static (__ dirname + '/ public'));
// déclarons un dossier public statique,
// c'est ici que nos fichiers statiques côté client / sortie vont
  1. Express - lovely express, un package d'infrastructure Web incroyablement rapide qui fournit notre solution de routage dans cette démonstration. assurez-vous de l'inclure comme indiqué ci-dessus et de définir votre application sur = express.
    Documentation officielle: https://www.npmjs.com/package/express
  2. Multer - Un paquet de nœuds pour la gestion des enctypes multipart / form-data (jargon nerd pour un formulaire html qui soumet des fichiers) ainsi que les rouages ​​de cette solution!
     Documentation officielle: https://www.npmjs.com/package/multer
  3. Body Parser - Cet outil incroyablement charmant nettoie et prépare l'objet req.body passé par nos itinéraires (et notre forme) et nous rend la vie plus facile!
    Documentation officielle: https://www.npmjs.com/package/body-parser

Configuration de Multer (comme un tutoriel sur youtube que j'ai trouvé)

La raison pour laquelle tout cela est possible est due au code suivant, plus que les autres bases que je vais vous expliquer. Mon inspiration pour ce billet est Ashish Mehra, une développeur Web, qui fournit une excellente solution, puis quelques-unes, ici:

C’est ce que j’ai pu mettre en œuvre grâce aux excellentes découvertes d’Ashish.

/ * dans le fichier App.js * /
// MULTER CONFIG: pour obtenir des photos de fichiers sur le serveur de stockage temporaire
const multerConfig = {
    
stockage: multer.diskStorage ({
 // Configuration de l'emplacement du fichier de l'utilisateur
 destination: fonction (req, fichier, suivant) {
   next (null, './public/photo-storage');
   },
    
    // Puis donnez un nom unique au fichier
    filename: function (req, file, next) {
        console.log (fichier);
        const ext = file.mimetype.split ('/') [1];
        next (null, file.fieldname + '-' + Date.now () + '.' + ext);
      }
    }),
    
    // Un moyen de s'assurer que seules les images sont téléchargées.
    fileFilter: function (req, fichier, suivant) {
          si (! fichier) {
            suivant();
          }
        const image = file.mimetype.startsWith ('image /');
        si (image) {
          console.log ('photo téléchargée');
          next (null, true);
        }autre{
          console.log ("fichier non supporté");
          
          // TODO: Un meilleur message de réponse à l'utilisateur en cas d'échec.
          return next ();
        }
    }
  };

Le formulaire HTML

Qu'est-ce qui fait un bon formulaire pour télécharger un fichier? Réponse - celui qui peut réellement y faire face. Votre formulaire HTML typique est utilisé pour gérer des données, pas des documents. Pour qu'un fichier soit publié, vous devez disposer de deux éléments critiques de configuration 4, également affichés dans le code de base, ci-dessous:

  1. changez le type de formulaire du formulaire en ‘multipart / form-data’, un type de code que Multer gère très bien.
  2. donnez-vous une méthode = "POST"
    (une sorte de donnée, mais essentielle à notre succès.)
  3. Une action qui publie sur une route route = "/ upload" (plus à ce sujet ci-dessous)
  4. avoir une entrée HTML avec type = "fichier" ET nom = "photo"

 
       

Le routeur

Terminons cette belle situation en gérant la route / le contrôleur à partir duquel le serveur envoie ce code, Special Trick: tout en appelant multerConfig! (voir route 2 ci-dessous).

/ * dans le fichier App.js * /
// Route 1: servir la page d'accueil
app.get ('/', fonction (req, res) {
    res.render ('index.html');
});
// Route 2: utilisez la solution de traitement de fichiers (elle a vraiment besoin d'une meilleure solution de réponse utilisateur. Si vous essayez de télécharger n'importe quoi sauf une image, il dira quand même 'complet' sans l'envoyer réellement. Restez à l'écoute pour une meilleure solution , ou mieux encore, construisez votre propre fork / clone et récupérez-la-moi afin que nous puissions améliorer cette chose ensemble pour tous ceux qui en ont besoin.
app.post ('/ upload', multer (multerConfig) .single ('photo'), fonction (req, res) {
   res.send ('Complete!');
});
// Veuillez noter les appels à la méthode .single ('photo'), et que 'photo' est le nom de notre champ de saisie de type de fichier!

Le serveur

Eh bien… cette application Web ne fonctionnera pas si elle n’en a pas. Alors hyg!

/ * dans le fichier App.js * /
app.listen (port, fonction () {
    console.log (`Le serveur écoute sur le port $ {port}`);
});

La sortie / solution (enfin ..)

Prenez votre pop-corn et laissez-vous envoûter par ces captures d'écran!

L’utilisateur choisit le fichier pour charger une image, puis clique sur Un message de confirmation renvoyé avec res.send à partir du routeur.Découvrez ces superbes photos téléchargées sur votre serveur local!