node.js 및 express를 사용하여 이미지를 업로드, 표시 및 저장하는 방법 [closed]

Question 1

이미지를 업로드하고 표시하고 로컬 호스트를 새로 고칠 때 잃어 버리지 않도록 저장해야합니다. 이 작업은 파일 선택을 요청하는 "업로드"버튼을 사용하여 수행해야합니다.

node.js를 사용하고 있으며 서버 측 코드로 표현합니다.

Question 2

먼저 파일 입력 요소를 포함하는 HTML 양식을 만들어야합니다 . 또한 양식의 enctype 속성을 multipart / form-data 로 설정 해야합니다 .

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

양식이 스크립트가있는 위치와 관련된 public 이라는 디렉토리에 저장된 index.html 에 정의되어 있다고 가정하면 다음과 같이 제공 할 수 있습니다.

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

이 작업이 완료되면 사용자는 해당 양식을 통해 서버에 파일을 업로드 할 수 있습니다. 그러나 애플리케이션에서 업로드 된 파일을 다시 어셈블하려면 요청 본문 (멀티 파트 양식 데이터)을 구문 분석해야합니다.

Express 3.x 에서는 express.bodyParser미들웨어를 사용 하여 멀티 파트 양식을 처리 할 수 있지만 Express 4.x 에서는 프레임 워크와 함께 번들로 제공되는 본문 파서가 없습니다. 운 좋게도 사용 가능한 많은 multipart / form-data 파서 중 하나를 선택할 수 있습니다 . 여기에서는 multer를 사용할 것입니다 .

양식 게시물을 처리 할 경로를 정의해야합니다.

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

위의 예 에서 / upload에 게시 된 .png 파일은 스크립트가있는 위치를 기준으로 업로드 된 디렉토리에 저장됩니다 .

업로드 된 이미지를 표시하려면 img 요소가 포함 된 HTML 페이지가 이미 있다고 가정합니다 .

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

Express 앱에서 다른 경로를 정의 res.sendFile하고 저장된 이미지를 제공하는 데 사용할 수 있습니다.

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