nodejs로 이미지 업로드 기능 만들기

1. 개요

• 이미지는 mongoDB같은데에 저장하진 않고
• 그냥 서버에 저장 함
• public 폴더에 image 폴더 만들어서 거기에 이미지 저장합시다

2. multer 라이브러리 설치

• 파일전송을 도와주는 라이브러리임

npm install multer

• 위 명령어 입력해서 설치

3. 코드

(1) upload.ejs

• upload.ejs파일 만들거임

    <div class="container mt-4">
      <h4 class="text-center mb-3">업로드페이지</h4>

      <form method="POST" action="/upload" enctype="multipart/form-data">
        <input type="file" name="uploadImg" />
        <button type="submit">전송</button>
      </form>
    </div>

• form태그 만들고 /upload라는 URL로 POST요청 할 수 있도록 속성 줍시다
• 그리고 name값이 uploadImg인 input태그 만들어주세요

(2) server.js

// multer 사용 설정
let multer = require("multer");
var storage = multer.diskStorage({
  // 저장 경로 설정하기
  destination: function (req, file, cb) {
    cb(null, "./public/image");
  },
  // 업로드된 파일명으로 저장하기
  filename: function (req, file, cb) {
    cb(null, file.originalname + "날짜" + new Date());
  },
  // 확장자 필터링
  filefilter: function (req, file, cb) {
    var ext = path.extname(file.originalname);
    if (ext !== ".png" && ext !== ".jpg" && ext !== ".jpeg") {
      return callback(new Error("PNG, JPG만 업로드하세요"));
    }
    callback(null, true);
  },
  // 파일 사이즈 제한
  limits: {
    fileSize: 1024 * 1024,
  },
});
// upload 미들웨어 설정
var upload = multer({ storage: storage });

• 우선 아까 다운받은 multer 라이브러리 설정을 해야 함
• 저장 경로랑 파일명 셋팅 같은거 다 해주고
• 특정 확장자의 파일만 업로드 할거면 그것도 셋팅해주면 됨

// 이미지 업로드 페이지 렌더링 코드
app.get("/upload", function (req, res) {
  res.render("upload.ejs");
});

// 이미지 업로드 코드
// upload.single("input 태그의 name 속성값")
app.post("/upload", upload.single("uploadImg"), function (req, res) {
  res.send("완료");
});

// 이미지 이름으로 URL 요청오면 해당 이미지 보여줌
app.get("/image/:imgName", function (req, res) {
  res.sendFile(__dirname + "/public/image/" + req.params.imgName);
});

• 특정 URL로 요청오면 처리하는 코드도 만들어줍시다