Cara mengupload, menampilkan, dan menyimpan gambar menggunakan node.js dan ekspres [closed]

Saya perlu mengupload gambar, dan menampilkannya, serta menyimpannya agar tidak hilang saat me-refresh localhost. Ini perlu dilakukan dengan menggunakan tombol "Unggah", yang meminta pemilihan file.

Saya menggunakan node.js dan mengekspresikan untuk kode sisi server.

Pertama-tama, Anda harus membuat formulir HTML yang berisi elemen input file . Anda juga perlu menyetel atribut enctype formulir ke multipart / form-data :

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

Dengan asumsi formulir ditentukan dalam index.html yang disimpan dalam direktori bernama public relative ke tempat skrip Anda berada, Anda dapat menyajikannya dengan cara ini:

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

Setelah selesai, pengguna akan dapat mengunggah file ke server Anda melalui formulir itu. Tetapi untuk memasang kembali file yang diunggah dalam aplikasi Anda, Anda harus mengurai isi permintaan (sebagai data formulir multi bagian).

Di Express 3.x Anda dapat menggunakan express.bodyParsermiddleware untuk menangani formulir multibagian tetapi pada Express 4.x , tidak ada pengurai tubuh yang dibundel dengan kerangka kerja. Untungnya, Anda dapat memilih salah satu dari banyak parser multipart / formulir-data yang tersedia di luar sana . Di sini, saya akan menggunakan multer :

Anda perlu menentukan rute untuk menangani posting formulir:

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

Dalam contoh di atas, file .png yang diposting ke / upload akan disimpan ke direktori yang diupload sesuai dengan lokasi skrip.

Untuk menampilkan gambar yang diunggah, dengan asumsi Anda sudah memiliki halaman HTML yang berisi elemen img :

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

Anda dapat menentukan rute lain di aplikasi ekspres Anda dan menggunakannya res.sendFileuntuk menyajikan gambar yang disimpan:

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