Comment télécharger, afficher et sauvegarder des images en utilisant node.js et express

Question

J'ai besoin de télécharger une image, de l'afficher et de l'enregistrer pour ne pas la perdre lorsque je rafraîchis l'hôte local. Pour ce faire, il faut utiliser un bouton "Télécharger", qui demande de sélectionner un fichier.

J'utilise node.js et express pour le code côté serveur.

Answer 1

Tout d'abord, vous devez créer un formulaire HTML contenant un fichier élément d'entrée du fichier . Vous devez également définir les paramètres du formulaire enctype de l'attribut multipart/form-data :

<form method="post" enctype="multipart/form-data" action="/upload">
    <input type="file" name="file">
    <input type="submit" value="Submit">
</form>

En supposant que le formulaire est défini dans index.html stocké dans un répertoire nommé public par rapport à l'endroit où se trouve votre script, vous pouvez le servir de cette façon :

const http = require("http");
const path = require("path");
const fs = require("fs");

const express = require("express");

const app = express();
const httpServer = http.createServer(app);

const PORT = process.env.PORT || 3000;

httpServer.listen(PORT, () => {
  console.log(`Server is listening on port ${PORT}`);
});

// put the HTML file containing your form in a directory named "public" (relative to where this script is located)
app.get("/", express.static(path.join(__dirname, "./public")));

Une fois que c'est fait, les utilisateurs pourront télécharger des fichiers sur votre serveur via ce formulaire. Mais pour réassembler le fichier téléchargé dans votre application, vous devrez analyser le corps de la requête (en tant que données de formulaire multipart).

Sur Express 3.x vous pourriez utiliser express.bodyParser pour traiter les formulaires multipartites, mais à partir de Express 4.x il n'y a pas d'analyseur de corps fourni avec le framework. Heureusement, vous pouvez choisir parmi l'une des options suivantes plusieurs disponibles multipart/form-data les analyseurs syntaxiques qui existent . Ici, je vais utiliser broyeur :

Vous devez définir une route pour gérer les messages du formulaire :

const multer = require("multer");

const handleError = (err, res) => {
  res
    .status(500)
    .contentType("text/plain")
    .end("Oops! Something went wrong!");
};

const upload = multer({
  dest: "/path/to/temporary/directory/to/store/uploaded/files"
  // you might also want to set some limits: https://github.com/expressjs/multer#limits
});

app.post(
  "/upload",
  upload.single("file" /* name attribute of <file> element in your form */),
  (req, res) => {
    const tempPath = req.file.path;
    const targetPath = path.join(__dirname, "./uploads/image.png");

    if (path.extname(req.file.originalname).toLowerCase() === ".png") {
      fs.rename(tempPath, targetPath, err => {
        if (err) return handleError(err, res);

        res
          .status(200)
          .contentType("text/plain")
          .end("File uploaded!");
      });
    } else {
      fs.unlink(tempPath, err => {
        if (err) return handleError(err, res);

        res
          .status(403)
          .contentType("text/plain")
          .end("Only .png files are allowed!");
      });
    }
  }
);

Dans l'exemple ci-dessus, .png les fichiers postés sur /téléchargement sera enregistré dans téléchargé répertoire relatif à l'endroit où se trouve le script.

Afin d'afficher l'image téléchargée, en supposant que vous avez déjà une page HTML contenant un fichier de type img élément :

<img src="/image.png" />

vous pouvez définir une autre route dans votre application express et utiliser res.sendFile pour servir l'image stockée :

app.get("/image.png", (req, res) => {
  res.sendFile(path.join(__dirname, "./uploads/image.png"));
});