NodeJS/NodeJS

[ NodeJS ] Multer 사용하기

shiro21 2023. 6. 20. 18:59
반응형

NodeJS에서 Multer를 사용하는 방법입니다.

파일을 보내서 저장하는 방법을 기록한 내용입니다.

 

npm

npm install multer

 

FrontEnd

먼저 Front에서 폼데이터를 사용해 내용을 넘겨줘야합니다. ( if문은 TypeScript라서 추가해준 내용입니다. )

const formData = () => {
    const formData = new FormData();
    
    // 아이디 | 이미지 | 제목
    formData.append("_id", "고유 아이디");
    if (enrollData.coverImage) formData.append("coverImage", enrollData.coverImage);
    formData.append("coverTitle", "제목");
    
    // 배열을 보내줄때는 for문을 사용해서 하나씩 보내줍니다.( ex: )
    for (let i = 0; i < enrollData.images; i++) formData.append("images", enrollData.images[i]);
}

api.post("enroll/createCover", formData)
.then(res => {
    if (res.data.code === "y") {
        console.log(res.data);
    }
})

 

BackEnd

업로드 서비스를 따로 만들어주었습니다.

 

uploadService.js

서버에 새로운 폴더를 만들어 그곳에 저장합니다.

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

const coverUpload = multer({
    storage: multer.diskStorage({
        destination: function(req, res, cb) {
            cb(null, "covers/");
        },
        filename: function (req, file, cb) {
            cb(null, new Date().valueOf() + path.extname(file.originalname));
        }
    })
})

 

Controller.js

formData와 이름을 맞춰주면 됩니다.

const ...

// Single
router.post("/createCover", coverUpload.single("coverImage"), async (req, res) => {
    
    const file = = req.file;
    
    console.log(file);
}

// Fields
router.post("/create", enrollUpload.fields([{ name: "coverImage" }, { name: "imagesFile" }]), async (req, res) => {
    
    const { coverImage, imagesFile } = req.files;
    
    console.log(coverImage);
    console.log(imagesFile);
}

// Array
router.post("/create", enrollUpload.array("images"), async (req, res) => {

    const files = = req.files;
    
    console.log(files);
}

 

중간중간 생략한 부분들이 많아서 일단 이렇게 정리해두고 나중에 다시 정리해서 올릴 생각입니다. ( __ )

반응형