multer 정리

multer

멀티파트 형식의 데이터(이미지,동영상 등)을 업로드할 때 사용하는 미들웨어
멀티파트 형식 : enctype이 multipart/form-data 인 데이터 형식

멀티파트 폼 데이터는 주로 file 타입 input에서 사용한다.

input으로 불러온 파일을 FormData에다 append 하는 방식으로 전달할수 있다.
multer는 해당 FormData를 처리하여 이미지, 동영상 등의 파일을 복구시켜 준다.

multer 문법

multer 설치 방법

npm i multer

upload 미들웨어 생성하기

multer 패키지에는 여러 종류의 미들웨어가 들어있다.
multer()를 이용해 upload 미들웨어를 만들어 라우터에서 사용하는 방식이다.

• storage: 저장할 공간에 대한 정보. 디스크,메모리 등에 저장 가능
• diskStorage : 하드디스크에 업로드 파일을 저장한다는 것
• destination : 저장할 경로 설정
• filename : 저장할 파일명(주로 파일명+날짜+확장자 형식으로 만든다.)
• Limits : 파일 개수나 파일 사이즈 제한
• done : 첫 번째 인수에는 에러가 있으면 에러를 넣고, 두 번째 인수에는 실제 경로나 파일 이름을 넣어주면 된다.

업로드 미들웨어 종류

upload.single()

파일을 하나만 업로드 하는 경우 사용하는 미들웨어

app.post('/upload', upload.single('image'), (req, res) => { // 'image'라는 이름은 multipart.html의 <input type="file" name="image"> 에서 폼데이터 이름으로 온 것이다.
    
    // upload.single('image')의 업로드 정보가 req.file에 넣어진다.
    // <input type="text" name="title"> 의 텍스트 정보가 req.body에 넣어진다.
    console.log(req.file, req.body); 
    res.send('ok');
})

upload.single 미들웨어를 라우터 미들웨어 앞에 넣어두면 multer 설정에 따라 파일 업로드 후 req.file 객체가 생성된다.
req.body에는 파일이 아닌, input 텍스트 데이터가 들어간다.

req.file 객체 예시)

{
    fieldname: 'img',
    originalname: 'hello.png',
    encoding: '7bit',
    mimetype: 'image/png',
    destination: 'uploads/',
    filename: 'hello1567238581123.png',
    path: 'uploads//hello1567238581123.png',
    size: 44933
}

upload.array()

여러 파일을 업로드하는 경우엔 input 태그에 multiple을 쓴다

이 경우 미들웨어는 upload.single 대신 upload.array 를 사용한다.
업로드한 정보들도 req.file이 아닌 req.files에 배열로 저장된다.

app.post('/upload', upload.array('many'), (req, res) => {
    console.log(req.files); // 업로드 결과도 req.file 대신 req.files 배열에 들어간다
    res.send('ok');
});

upload.fields()

파일을 따로따로 업로드를 여러개 하는 경우에 사용한다.

예를 들어 아래와 같이 input의 키(name)이 다 다른 경우

<form action="/upload" method="post" enctype="multipart/form-data">
  <input type="file" name="image1">
  <input type="file" name="image2">
  <input type="file" name="image3">
  <input type="text" name="title">
  <button type="submit">Submit</button>
</form>

upload.fields 를 사용해 각각을 처리해야 한다.

app.post('/upload',
    upload.fields([{ name: 'image1', limits: 5 }, { name: 'image2' }, { name: 'image3' }]), // 배열 객체를 넣는다.
    (req, res) => {
    	// 업로드 결과는 각각 req.files.image1, req.files.image2에 들어간다.
        console.log(req.files.image1);
        console.log(req.files.image2);
        console.log(req.files.image3);
        res.send('ok');
    }
);

limit은 최대로 들어갈 이미지의 개수를 설정하는 속성이다.

upload.none()

multer는 파일이 아님에도 멀티파트 형식으로 업로드하는 경우가 있다.
new FormData()로 텍스트 등을 보낼때도 있기 때문이다.
그 경우 upload.none 미들웨어를 사용한다.

app.post('/upload', upload.none(), (req, res) => {
    console.log(req.body.title); // 이 경우 파일을 업로드하지 않으므로 req.body만 존재한다.
    res.send('ok');
});

FormData 형식의 파일을 upload.none()으로 처리해서 req.body에 넣어주었다.