Hochladen, Anzeigen und Speichern von Bildern mit node.js und Ausdrücken von [geschlossen]

Ich muss ein Bild hochladen und anzeigen sowie speichern, damit ich es nicht verliere, wenn ich den lokalen Host aktualisiere. Dies muss über eine Schaltfläche "Hochladen" erfolgen, die zur Auswahl einer Datei auffordert.

Ich verwende node.js und drücke für den serverseitigen Code aus.

Zunächst sollten Sie ein HTML-Formular erstellen, das a enthält erstellen, Dateieingabeelement . Sie müssen auch das enctype- Attribut des Formulars auf multipart / form-data setzen :

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

Angenommen, das Formular ist in index.html definiert und in einem Verzeichnis mit dem Namen public gespeichert, das sich auf den Speicherort Ihres Skripts bezieht. Sie können es folgendermaßen bereitstellen:

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

Sobald dies erledigt ist, können Benutzer über dieses Formular Dateien auf Ihren Server hochladen. Um die hochgeladene Datei in Ihrer Anwendung wieder zusammenzusetzen, müssen Sie den Anforderungshauptteil (als mehrteilige Formulardaten) analysieren.

In Express 3.x können Sie express.bodyParserMiddleware verwenden, um mehrteilige Formulare zu verarbeiten. Ab Express 4.x ist jedoch kein Body-Parser im Framework enthalten. Zum Glück können Sie aus einem der auswählen vielen verfügbaren Multipart- / Formulardaten- Parser . Hier werde ich Multer verwenden :

Sie müssen eine Route definieren, um Formularbeiträge zu verarbeiten:

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

Im obigen Beispiel wurden PNG- Dateien an gesendet / upload hochgeladene in einem hochgeladenen Verzeichnis relativ zu dem des Skripts gespeichert .

Um das hochgeladene Bild anzuzeigen, setzen Sie voraus, dass Sie bereits eine HTML-Seite mit einem img- Element haben:

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

Sie können in Ihrer Express-App eine andere Route definieren und res.sendFiledas gespeicherte Bild bereitstellen:

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