MongoDB - multer 이미지 업로드하기

이미지 업로드 방법

 

1. html5: form enctype="multipart/form-data", input type="file"

    <div class="container mt-4">
      <h2>업로드 페이지</h2>
      <form action="/upload" method="POST" enctype="multipart/form-data">
=> form enctype 속성은 서버로 폼 데이터 전송하는 방식 지정

        <input type="file" name="profile" />
=>  input type은 file로

        <button type="submit">전송하기</button>
      </form>
    </div>

/upload 페이지를 만듭니다.

app.get("/upload", (요청, 응답) => {
  응답.render("upload.ejs");
});

 

2. 파일 전송을 도와주는 라이브러리 설치

multer를 설치합니다.

$ npm i multer

 

multer 모듈을 불러옵니다.

const multer = require("multer");

 

multer 셋팅을 합니다.

이미지 메모리에 저장하려면 multer.memoryStroage

*** 이미지 메모리에 저장하기 (휘발성) ***
*** const storage = multer.memoryStorage ***

 

이미지는 DB에 저장하지 않고, 하드에 저장하는 방식이 싸고 편리합니다.

이미지 하드에 저장하기
const storage = multer.diskStorage({

 

 

public폴더를 만들고 이 안에 image폴더를 만들어 저장합니다.

 

이미지 저장 경로 설정: ./public/image

const storage = multer.diskStorage({
  destination: (request, file, callback) => {
    callback(null, "./public/image");
  },

 

 

=> 파일명 설정: 원본 파일명으로/ 날짜 넣고 싶으면 callback(null, file.originalname + new Date());

  filename: (request, file, callback) => {
    callback(null, file.originalname);
  },

 

 

=> 이미지 확장자 제한

  fileFilter: function (request, file, callback) {
    var extension = path.extname(file.originalname);
    if (extension !== ".png" && extension !== ".jpg" && extension !== ".jpeg") {
      return callback(new Error("PNG, JPG, JPEG 만 업로드 됨"));
    }
    callback(null, true);
  },

 

 

=> 이미지 사이즈 제한 1024*1024는 1MB

  // limits: {
  //   fileSize: 1024 * 1024,
  // },
});

전체코드

const storage = multer.diskStorage({
  destination: (request, file, callback) => {
    callback(null, "./public/image");
  },
  filename: (request, file, callback) => {
    callback(null, file.originalname);
  },
  fileFilter: function (request, file, callback) {
    var extension = path.extname(file.originalname);
    if (extension !== ".png" && extension !== ".jpg" && extension !== ".jpeg") {
      return callback(new Error("PNG, JPG, JPEG 만 업로드 됨"));
    }
    callback(null, true);
  },
  limits: {
    fileSize: 1024 * 1024,
  },
});

---

3. POST요청에 multer를 middleware로 실행합니다.

app.post("/upload", upload.single("profile"), (요청, 응답) => {
  응답.send("업로드 성공");
});

 

파일을 여러개 업로드하려면 single이 아니라 array, input태그에 multiple (따로 방법 찾아보기)

app.post("/upload", upload.array("profile", 10), (요청, 응답) => {
  응답.send("업로드 성공");
});

 

4. 업로드한 이미지 주소는 파라미터 문법을 써서

 

app.get("/image/:imageName", (요청, 응답) => {
  응답.sendFile(__dirname + "/public/image/" + 요청.params.imageName);
});

=>  __dirname은 현재 server.js 파일이 있는 경로

 

5. public폴더 안의 image 폴더 안의 이미지 파일 보여주기

<img src=""/> 로 출력하면 되겠죠

    <div class="container mt-5">
      <h3>업로드 된 이미지</h3>
      <img src="/image/06.png" />
    </div>