web-dev-qa-db-fra.com

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

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

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

imagenode.jsuploadexpress
77
user1602123

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 soit défini dans index.html stocké dans un répertoire nommé public par rapport à l'emplacement de votre script, vous pouvez le servir de la manière suivante:

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(3000, () => {
  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. Toutefois, pour réassembler le fichier téléchargé dans votre application, vous devez analyser le corps de la demande (en tant que données de formulaire multipart).

Dans Express 3.x, vous pouvez utiliser le middleware express.bodyParser pour gérer les formulaires en plusieurs parties, mais à partir de Express 4.x, aucun analyseur de corps n'est fourni avec la structure. Heureusement, vous pouvez choisir parmi l’un des nombreux analyseurs disponibles multipart/form-data . Ici, je vais utiliser multer :

Vous devez définir un itinéraire pour gérer les messages 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, . Png les fichiers postés dans / upload seront enregistrés dans le répertoire ploadé en fonction de l'emplacement du script.

Pour afficher l'image téléchargée, en supposant que vous avez 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 utiliser res.sendFile pour afficher l'image stockée:

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