Come caricare, visualizzare e salvare immagini utilizzando node.js ed express [closed]

Devo caricare un'immagine e visualizzarla, oltre a salvarla in modo da non perderla quando aggiorno il localhost. Questo deve essere fatto utilizzando un pulsante "Carica", che richiede una selezione di file.

Sto usando node.js ed express per il codice lato server.

Prima di tutto, dovresti creare un modulo HTML contenente un elemento di input del file . È inoltre necessario impostare l' attributo enctype del modulo su multipart / form-data :

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

Supponendo che il modulo sia definito in index.html memorizzato in una directory denominata public rispetto a dove si trova il tuo script, puoi servirlo in questo modo:

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")));

Una volta fatto, gli utenti saranno in grado di caricare file sul tuo server tramite quel modulo. Ma per riassemblare il file caricato nella tua applicazione, dovrai analizzare il corpo della richiesta (come dati del modulo multiparte).

In Express 3.x è possibile utilizzare il express.bodyParsermiddleware per gestire i moduli multiparte, ma a partire da Express 4.x , non esiste alcun analizzatore del corpo in bundle con il framework. Fortunatamente, puoi scegliere tra uno dei tanti parser multipart / form-data disponibili . Qui, userò multer :

Devi definire un percorso per gestire i post del modulo:

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!");
      });
    }
  }
);

Nell'esempio sopra, i file .png inviati a / upload verranno salvati nella directory caricata relativa a dove si trova lo script.

Per mostrare l'immagine caricata, supponendo che tu abbia già una pagina HTML contenente un elemento img :

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

puoi definire un altro percorso nella tua app express e usarlo res.sendFileper servire l'immagine memorizzata:

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