node.Js 이미지 업로드, 삭제

🧑🏻‍💻 node.js 이미지 업로드

✔️ middleware 환경구성

node.js 에서 이미지 업로드를 위해선 form-data 형태의 데이터를 받아 처리해야 한다.
form-data 형태는 기본적으로 request에 존재한다. req의 body에 담겨있는 form-data 형태의 데이터를 처리하기위해 'multer' 라는 미들웨어를 사용한다.

npm install multer --save

💽 우선 multer를 설치한다.

✔️ multer.js 구성

나는 프로젝트 폴더 내 util이라는 폴더에 multer.js를 구성하여 이하 사항을 진행했다.

const multer = require("multer");
const path = require("path");

const fileFilter = (req, file, cb) => {
  // 확장자 필터링
  if (
    file.mimetype === "image/png" ||
    file.mimetype === "image/jpg" ||
    file.mimetype === "image/jpeg"
  ) {
    cb(null, true); // 해당 mimetype만 받겠다는 의미
  } else {
    // 다른 mimetype은 저장되지 않음
    req.fileValidationError = "jpg,jpeg,png,gif,webp 파일만 업로드 가능합니다.";
    cb(null, false);
  }
};

const upload = multer({
  storage: multer.diskStorage({
    //폴더위치 지정
    destination: (req, file, done) => {
      done(null, "/uploads");
    },
    filename: (req, file, done) => {
      const ext = path.extname(file.originalname);
      // aaa.txt => aaa+&&+129371271654.txt
      const fileName = path.basename(file.originalname, ext) + Date.now() + ext;
      done(null, fileName);
    },
  }),
  fileFilter : fileFilter,
  limits: { fileSize: 30 * 1024 * 1024 },
});

module.exports = { upload };

저장위치를 프로젝트 내 uploads 폴더로 지정해 놓고 multer의 params 부분인
storage: multer.diskStorage 안에 폴더위치와 filename을 지정해주었다.
fileFilter 함수를 만들어 jpg, jpeg, png 타입이 아닌 파일은 저장되지 않게 만들었다.
limits 를 이용해 최대 30MB 크기의 이미지 까지만 업로드 할수 있게 지정 하였다.

✔️ router.js 이미지 업로드

const { upload } = require("../utils/multer");

var app = express.Router();

// 이미지 업로드
app.post("/upload", upload.single("img"), async (req, res) => {

  const imgfile = req.file;
  console.log(imgfile);
  //
  ...
  //
  
}); //이미지 업로드 end

module.exports = app;

이미지 업로드는 middleware 자리에 들어가게 된다.
기본적으로 한개의 파일만 업로드 하는 경우는 middlewareName.single("form-data-name") 의 형태이다.
두개 이상의 파일을 업로드 하는경우는 upload.fields([{ name: 'img' }, { name: 'photos' }]) 의 형태이거나 .array() 형태로 데이터를 받는다.

🚨 주의!! front의 formdata의 이름을 미들웨어 필드의 이름과 일치시켜줘야 한다.

✔️ router.js 이미지 삭제

삭제는 DB를 삭제하기도 하지만 파일 자체를 삭제 해야한다.
파일 자체를 삭제하기 위해 file System인 fs를 설치하여 사용한다.

💽 npm install을 통해 fs 모듈을 설치
npm install fs

var fs = require("fs");
const { upload } = require("../utils/multer");

var app = express.Router();

//이미지 삭제 add (02.06 OYT)
app.delete("/upload", async (req, res) => {

  if (fs.existsSync("/uploads" + file_name)) {
    // 파일이 존재한다면 true 그렇지 않은 경우 false 반환
    try {
      fs.unlinkSync("/uploads" + file_name);
      console.log("image delete");
    } catch (error) {
      console.log(error);
    }
  }
  //
  ...
  //
}); //이미지 삭제 end

module.exports = app;

fs.existsSync 로 이미지가 있는지 확인한다.
이미지가 있다면 fs.unlinkSync 로 이미지를 삭제 한다.
파일을 직접 지우는 코드 이기에 경로를 잘 확인하고 진행해야 한다.

🙇🏻‍♂️ 이렇게 node.js에서 이미지 업로드 및 삭제의 포스팅을 끝낸다.

🙌 END