Comment télécharger, afficher et enregistrer des images à l'aide de node.js et express [Closed]

J'ai besoin de télécharger une image et de l'afficher, ainsi que de l'enregistrer pour ne pas la perdre lorsque j'actualise l'hôte local. Cela doit être fait en utilisant un bouton "Télécharger", qui invite à une sélection de fichier.

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

Tout d'abord, vous devez créer un formulaire HTML contenant un élément d'entrée de fichier . Vous devez également définir l' attribut enctype du formulaire sur 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'emplacement de votre script, vous pouvez le servir de cette manière:

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 cela 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 demande (en tant que données de formulaire en plusieurs parties).

Dans Express 3.x, vous pouvez utiliser un express.bodyParsermiddleware pour gérer les formulaires en plusieurs parties , mais à partir d' Express 4.x , il n'y a pas d'analyseur de corps fourni avec le framework. Heureusement, vous pouvez choisir parmi l'un des nombreux analyseurs de données multipart / form-data disponibles . Ici, je vais utiliser multer :

Vous devez définir un itinéraire pour gérer les publications de 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, les fichiers .png publiés dans / upload seront enregistrés dans le répertoire téléchargé par rapport à l'emplacement du script.

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

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

vous pouvez définir un autre itinéraire dans votre application express et l'utiliser res.sendFilepour servir l'image stockée:

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