[nodejs] file upload 다루기 multer vs formidable

Multer   

Multer는 파일 업로드를 위해 사용되는 multipart/form-data 를 다루기 위한 node.js 의 미들웨어 입니다. 효율성을 최대화 하기 위해 busboy 를 기반으로 하고 있습니다.

주: Multer는 multipart (multipart/form-data)가 아닌 폼에서는 동작하지 않습니다.

 

multer는 모든 form-data를 다룰 수 있고 업로드된 파일을 컨트롤 할 수 있는 여러가지 편의성을 제공하지만 클라이언트 사이드에서 <input>한 file을 컨트롤 하는데 에로사항이 조금 있는 것 같다.

 

<input type="file" id="searchFile">

Local에 있는 파일을 손쉽게 가져올 수 있는 유용한 태그이다. '파일 선택'을 누르게 되면 잘 아는 창이 뜬다.

파일 선택 팝업

파일을 선택하게 되면 선택된 파일 이름이 render되고 'Filelist'라는 객체가 생성이 되는데 이 객체는 'immutable'한 객체로 수정이 불가하다.

 

※ multer는 FileList로 전달된 file이 아니면 인식을 하지 못한다. 여러파일을 동시에 보내고 싶다면 multiple option을 사용해서 file 여러개를 한꺼번에 선택해줘야 하고 form-data에 append 할때는

for (let i = 0; i < searchFile.files.length; i++) {
            form.append('file' + String(i), searchFile.files[i])
}

 반복문을 사용해서 key값을 달리해서 append해야 multer에서 인식할 수가 있다.

 

또 하나의 이슈는 파일 업로드 전에 업로드할 파일 목록을 보여주가 추가/삭제할 수 있는 기능을 구현할 때이다.

 

FileList는 'immutable'한 수정 불가능한 객체이기 때문에 File을 새로운 객체나 배열에 넣어서 컨트롤 해줘야하는데 그러면 multer에서 인식을 하지 못한다. 그래서 formidable로 간단하게 해결할 수 있었다....!

 

formidable

A Node.js module for parsing form data, especially file uploads.

 

npm install formidable
# or the canary version 
npm install formidable@canary

설치해준다!

 

var formidable = require('formidable')
var fs = require('fs')

import해준다!

 

app.post('/upload', (req, res) => {
	// form-data 파싱을 위한 form 객체 생성
    var form = new formidable.IncomingForm();
	parsing 	
    form.parse(req, function(err, fields, files) {
        var oldpath = files.file.path;
        var newpath = 'C:/server/upload/' + files.file.name;
        fs.rename(oldpath, newpath, function (err) {
          if (err) throw err;
          res.write('File uploaded and moved!');
          res.end();
        });
      });
    
})

server로 file upload 및 save까지 코드

 

    var form = new formidable.IncomingForm();

data 파싱을 위해서 필수 생성해줘야 한다.

 

 form.parse(req, function(err, fields, files) {
 	console.log(fields, files)
 }

text data는 fields로 file data는 files로 확인할 수 있다.

 

postman을 이요해서 text data와 file data를 보내보면 아래와 같이 받을 수가 있다.

 

files에 들어온 file2의 path는 임시 저장된 file의 위치를 나타내고 있다. file을 원하는 위치에 저장하기 위해서 fs 모듈의 rename method를 사용해주면 된다.

 

fs.rename(oldpath, newpath, function (err) {
	if (err) throw err;
	res.write('File uploaded and moved!');
	res.end();
});

oldpath에 업로드된 임시저장 파일에 경로를 newpath에 새롭게 저장할 경로 + file name을 넣어주면 새로운 경로에 저장할 수 가 있게 된다.

 

 

var newpath = 'C:/server/upload/' + files.file.name;

※ 경로 마지막에 '/'를 꼭 넣어줘야 해당 폴더내에 저장이 된다.