Node.js ve ekspres [kapalı] kullanarak resimler nasıl yüklenir, görüntülenir ve kaydedilir?

Localhost'u yenilediğimde kaybetmemek için bir resim yüklemem, görüntülemem ve kaydetmem gerekiyor. Bu, bir dosya seçimi isteyen "Yükle" düğmesi kullanılarak yapılmalıdır.

Node.js kullanıyorum ve sunucu tarafı kodu için ifade ediyorum.

Öncelikle, bir dosya giriş öğesi içeren bir HTML formu yapmalısınız . Ayrıca formun enctype özniteliğini multipart / form-data olarak ayarlamanız gerekir :

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

Formun, komut dosyanızın bulunduğu yere göre public adlı bir dizinde depolanan index.html'de tanımlandığını varsayarak, bu şekilde sunabilirsiniz:

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

Bu yapıldıktan sonra, kullanıcılar bu form aracılığıyla sunucunuza dosya yükleyebilecekler. Ancak yüklenen dosyayı uygulamanızda yeniden birleştirmek için istek gövdesini ayrıştırmanız gerekir (çok parçalı form verileri olarak).

In Express 3.x kullanabilirdin express.bodyParserçok parçalı formları işlemek için ara katman ancak itibariyle Express 4.x , çerçeve ile birlikte hiçbir vücut ayrıştırıcı var. Neyse ki, mevcut çok parçalı / form veri ayrıştırıcılarından birini seçebilirsiniz . Burada multer kullanacağım :

Form gönderilerini işlemek için bir yol tanımlamanız gerekir:

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

Yukarıdaki örnekte, / upload konumuna gönderilen .png dosyaları , komut dosyasının bulunduğu yere göre yüklenen dizine kaydedilir .

Yüklenen resmi göstermek için, bir img öğesi içeren bir HTML sayfanız olduğunu varsayarak :

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

ekspres uygulamanızda başka bir rota tanımlayabilir res.sendFileve depolanan görüntüyü sunmak için kullanabilirsiniz :

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