Gestion des téléchargements de fichiers dans les formulaires à l'aide d'Express

Comment gérer le stockage et la gestion des fichiers téléchargés via des formulaires, dans Express

Voici un exemple de formulaire HTML qui permet à un utilisateur de télécharger un fichier:

<form method="POST" action="/submit-form" enctype="multipart/form-data">
  <input type="file" name="document" />
  <input type="submit" />
</form>

N'oubliez pas d'ajouterenctype="multipart/form-data"au formulaire, ou les fichiers ne seront pas téléchargés

Lorsque l'utilisateur appuie sur le bouton d'envoi, le navigateur crée automatiquement unPOSTdemande à la/submit-formURL sur la même origine de la page. Le navigateur envoie les données contenues, non encodées comme une forme normaleapplication/x-www-form-urlencoded, mais commemultipart/form-data.

Côté serveur, la gestion des données en plusieurs parties peut être délicate et sujette aux erreurs, nous allons donc utiliser une bibliothèque utilitaire appeléeredoutable.Voici le dépôt GitHub, il compte plus de 4000 étoiles et est bien entretenu.

Vous pouvez l'installer en utilisant:

npm install formidable

Ensuite, incluez-le dans votre fichier Node.js:

const express = require('express')
const app = express()
const formidable = require('formidable')

Maintenant, dans lePOSTpoint final sur le/submit-formroute, nous instancions un nouveau formulaire Formidable en utilisantformidable.IncomingForm():

app.post('/submit-form', (req, res) => {
  new formidable.IncomingForm()
})

Après cela, nous devons être en mesure d'analyser le formulaire. Nous pouvons le faire de manière synchrone en fournissant un rappel, ce qui signifie que tous les fichiers sont traités, et une fois formidable est fait, il les rend disponibles:

app.post('/submit-form', (req, res) => {
  new formidable.IncomingForm().parse(req, (err, fields, files) => {
    if (err) {
      console.error('Error', err)
      throw err
    }
    console.log('Fields', fields)
    console.log('Files', files)
    for (const file of Object.entries(files)) {
      console.log(file)
    }
  })
})

Ou, vous pouvez utiliser des événements au lieu d'un rappel. Par exemple, pour être notifié lorsque chaque fichier est analysé, ou d'autres événements tels que l'achèvement du traitement du fichier, la réception d'un champ non-fichier ou si une erreur s'est produite:

app.post('/submit-form', (req, res) => {
  new formidable.IncomingForm().parse(req)
    .on('field', (name, field) => {
      console.log('Field', name, field)
    })
    .on('file', (name, file) => {
      console.log('Uploaded file', name, file)
    })
    .on('aborted', () => {
      console.error('Request aborted by the user')
    })
    .on('error', (err) => {
      console.error('Error', err)
      throw err
    })
    .on('end', () => {
      res.end()
    })
})

Quelle que soit la façon dont vous choisissez, vous obtiendrez un ou plusieurs objets Formidable.File, qui vous donneront des informations sur le fichier téléchargé. Voici quelques-unes des méthodes que vous pouvez appeler:

  • file.size, la taille du fichier en octets
  • file.path, le chemin dans lequel le fichier est écrit
  • file.name, le nom du fichier
  • file.type, le type MIME du fichier

Le chemin par défaut est le dossier temporaire et peut être modifié si vous écoutez lefileBeginun événement:

app.post('/submit-form', (req, res) => {
  new formidable.IncomingForm().parse(req)
    .on('fileBegin', (name, file) => {
        file.path = __dirname + '/uploads/' + file.name
    })
    .on('file', (name, file) => {
      console.log('Uploaded file', name, file)
    })
    //...
})

Téléchargez mon gratuitManuel Express.js


Plus de tutoriels express: