nodejs express 에서 multipart 데이터를 받아서 처리하기

<input id="multipart_file" type="file" name="img">
<button id="submit_btn"></button>

input tag에서 이미지 파일을 받아서 웹서버로 넘겨주는 기능을 필요로 할 때, nodejs의 multer 를 이용해서 가져올 수 있다.
위 html 코드를 예시로 작성해 보았을 때,

$(function(){
	$("#submit_btn").on("click", function(){
    	let formData = new FormData();
        formData.append('img', $("#multipart_file").prop('files')[0]);
    });
});

위 코드에서 formData객체를 새로 생성 후, formData객체에 데이터를 추가하는 이벤트 리스너를 등록한 후에

$.ajax({
	url: 서버URL,
    type: "POST",
    data: Formdata,
    contentType: false,
    processData: false,
    success: function(result){
    	//res 받은 후 처리 로직 작성
    },
    error: function(data,response, status, xhr) {
    	// error 이면 처리 로직 작성
    }
 });

웹서버 url에 POST 요청을 보내는 ajax 코드를 작성하면 웹서버에서 request를 받을 수 있게된다.

app.post('/upload', upload.single('wzSpec'), (req, res) =>
    let param = req.body;
    let file = req.file;

    // 파일경로를 string으로 가져온다
    let file_path = file.destination.toString() + "/" +  f
    // request 데이터에 파일경로 추가 (DB에 update하기 위함)
    param.wzSpec = file_path;
    if ( param.cmd == "update" ) {
        WZAPP.WZ_MP_UPDATE(param, function(result){
            res.json( result );
        });
    }
});

위 코드는 nodejs express 모듈을 사용하여 multipart file을 받아 처리 하는 코드의 일부이다.
파일 경로를 string으로 전환하여, sqlite DB에 UPDATE 하는 코드이다.

참고로 

const multer = require('multer');

이와같이 multer를 선언해 주어야 한다.

 

지금까지 multer를 사용하여 html의 multipart file을 받아오는 예시 코드를 작성해 보았다.