nodejs에서 multer로 이미지 파일 업로드를 처리하는 방법

이 튜토리얼에서는 multer 및 mkdirp 패키지를 사용하여 nodejs에서 이미지 파일 업로드 기능을 만드는 과정을 살펴보겠습니다.

메모

이 자습서에서는 사용자가 express 및 nodejs에 익숙하고 expressjs 애플리케이션이 실행 중이라고 가정합니다. 그렇지 않은 경우 문서here를 참조하십시오.

단계

1. 파일 업로드용 패키지multer와 다중 레벨 디렉토리 생성용 패키지mkdirp를 설치합니다.

2. multer-config.js 및 fileupload.route.js라는 두 개의 파일을 생성합니다.

multer-config.js

이미지 업로드 로직을 포함하는 미들웨어입니다. 이 미들웨어는 mkdirp 패키지를 사용하여 이미지 파일이 저장될 경로를 생성합니다. 업로드할 파일이 이미지인지 확인하는 fileFilter 함수도 추가했습니다.

const multer = require("multer");
 const mkdirp = require("mkdirp");
 const MIME_TYPES = {
  "image/jpg": "jpg",
  "image/jpeg": "jpg",
  "image/png": "png",
  "image/gif": "gif",
};

const dir = "public/storeowners/uploads/images";

const storage = multer.diskStorage({
  destination: (req, file, callback) => {
    mkdirp(dir)
      .then((data) => callback(null, dir))
      .catch((e) => callback(e, dir));
  },
  filename: (req, file, callback) => {
    const name = file.originalname.split(" ").join("_");
    const extension = MIME_TYPES[file.mimetype];
    callback(null, Date.now() + "." + extension);
  },
});

const fileFilter = (req, file, cb) => {
  if (!MIME_TYPES[file.mimetype]) {
    cb("File must be an image", false);
  } else {
    cb(null, true);
  }
};

module.exports = multer({
  storage: storage,
  limit: {
    fileSize: 2000000,
  },
  fileFilter,
}).single("image");

파일업로드.route.js

여기에는 클라이언트의 http 요청을 처리하기 위한 경로가 포함됩니다.

const express = require("express");
const router = express.Router();
const uploadImage = require("./multer-config.js"); //import the multerconfig

//create a post route to handle http request for file upload 
router.post("/", uploadImage, (req, res) => {
  if (req.file) {
    return res.status(200).json({
      success: true,
      message: "Image uploaded!",
    });
  }

  return res.status(400).json({
    success: false,
    error: "Image upload failed!",
  });
});

module.exports = router;

App.js

이것은 애플리케이션의 진입점입니다. 여기에서 애플리케이션이 작동하는지 확인하기 위한 최종 설정을 수행합니다.

const express = require("express");
const app = express();
//import the fileupload route
const fileuploadRoute = require("./fileupload.route.js");
const cors = require("cors");

app.use(cors());
app.use(express.urlencoded({ extended: false }));
app.use(express.json());
app.use(express.static("./public"));

//setup the file upload route
app.use("/api/uploadimage", fileuploadRoute);

//start listen on port 3000 or any port you prefer
app.listen(3000, () => {
  console.log("server is listening on port 3000");
});

이제 엔드포인트에 포스트 요청을 보내 이미지 파일을 업로드할 수 있습니다.

localhost:3000/api/uploadimage

해피코딩