7. 익스프레스 (1) - 미들웨어 [10] : multer 3

 

 

 

 

multer 사용 방법에 대해서, 앞선 아티클에 이어서 살펴보겠습니다.

 

 

7. 익스프레스 (1) - 미들웨어 [10] : multer 2

 

 

이번에는 여러 개의 파일을 업로드하는 경우 입니다. 우선 HTML 파일에서 input 태그에 multiple을 작성합니다.

 

[multipart.html]

<form id="form" action="/upload" method="post" enctype="multipart/form-data">
    <input type="file" name="many" multiple />
    <input type="text" name="title" />
    <button type="submit">여러 파일 업로드</button>
</form>

 

 

 

 

 

 

미들웨어는 single 대신 array로 교체해줍니다. 업로드 결과물도 req.file 대신 req.files 배열에 들어갑니다. 

 

app.post('/upload', upload.array('many'), (req, res) => {
    console.log(req.files, req.body);
    res.send('ok');
});

 

 

만일 여기서 파일을 여러 개 업로드 하면서도 input 태그나 폼 데이터의 키가 다른 경우에는,fields 미들웨어를 사용하게 됩니다. 

 

 

[multipart.html]

<form id="form" action="/upload" method="post" enctype="multipart/form-data">
    <input type="file" name="image1" />
    <input type="file" name="image2" />
    <input type="text" name="title" />
    <button type="submit">여러 이미지 업로드</button>
</form>

 

 

위와 같이 여러 파일을 업로드하는 케이스라고 가정해 보겠습니다. 이제 fields 미들웨어에서 인수로 input 태그의 name을 부여합니다. 

 

app.post('/upload', 
    upload.fields([{ name: 'image1' }, { name: 'image2' }]), 
    (req, res) => {
        console.log(req.files, req.body);
        res.send('ok');
    },
);

 

 

이런식으로 컨트롤하게 되면, 업로드 결과물도 req.files.image1, req.files.image2에 각각 들어가게 됩니다.