멀터. 최근에는 다들 멀터s3를 사용하지만, 그래도 멀터라는 기본 기능을 알기 위해서는 가장 베이직한 멀터가 어떤 원리로 이용이 되는지를 알아야 s3로 응용도 쉬울것이다.
그래서 처음으로 멀터를 사용하는 사람들이 이해하기 쉽도록 npm에 설명되어있는 멀터의 내용을 기반으로 핵심적인 내용들을 정리하려고 한다.
일단, 멀터라는 것은 "사진"을 업로드 할때 쓰는 npm이다.
원래 프론트, 백엔드 사이에서 글자인 내용을 주고 받기 위해서도 몇 가지 설정이 필요하다.
<프론트/ 백 소통할때 기본 설정해 주어야 하는것>
프론트: form method="POST"
백엔드: express.urlencoded({extended:true})
이 설정을 쓰지 않으면
상대가 영어로 말하는데, 나는 한국어만 할줄 아는것과 똑같다.
= 둘 사이에 의사소통이 안된다.
-> express.urlencoded({extended:true}) 를 쓰는게 번역기 쓰는것과 같은 의미다.
사용하는 npm에 따라 다르겠지만,
일단 express를 사용할때는 express.urlencoded({extended:true})를 사용한다.
"문서/글자" 를 서로 소통할때에 해주는 설정들이 있다는걸 알았다.
이번에는 그렇다면 "사진"을 프론트/백엔드 둘다 소통 하기 위해서는 어떤 언어 설정을 해주어야 하는지 살펴보자.
<사진을 주고 받고 싶다, multer>
멀터 설명에 보면, 프론트엔드에서 꼭! 이걸 빼먹지 말고 설정해줘야 해. 라고 제일 먼저 설명을 해준다.
바로, enctype을 설정하라는 것이다.
아까전에 글자를 서로 주고 받기 위해서 프론트에서 method="post"로 오는걸 인식했다면,
사진을 인식하기 위해서는 프론트에서 enctype="multipart/form-data"라는걸 설정을 해야 한다는 것이다.
쉽기 설명해서 글자를 보낼때는 한국어로 보낼게. 라는 언어를 설정했다면
사진을 보낼때도 "사진은 형식이 좀 다르니까, 영어로(?)로 보내줄게" 라고, 설정을 해야 한다는 것이다.
그리고 프론트에서 어떤 파일을 보낼지는 "name"으로 설정하고,
이 name이 백엔드에서 받게 될 파일을 인식하게 해준다.
너와 나의 연결고리 = name
프론트와 백엔드의 연결고리 = name
백엔드에서는 그렇다면 어떤 설정을 해주어야 할까?
일단 멀터를 받는다는건, 프론트에서 보내는 사진을 읽을 수 있는 번역기를 받는것과 같다.
(프론트에서 영어(?)로 사진이 전송된다고 하면,
백엔드에서는 멀터라는 번역기를 사용해서 내용을 읽을 수 있게 된다.)
==>멀터는 백엔드에서 사진을 번역할 수 있는 번역기 정도로 일단 이해해보자.
<멀터 기본 설정>
멀터는 일단 사용 방법이, multer({ 사진을 저장할 위치 지정}) 이렇게 사용을 한다.
+
멀터를 사용할때 multer.diskStorage({})로 사용할 시, 조금더 세밀하게 저장 방법을 설정할 수 있다.
(저장시 이름을 바꾼다던지, 저장시에 시간을 추가 한다 등등)
이렇게 기본 설정은 두가지가 있다는걸 알 수 있다.
multer({사진 저장할 위치 설정})
multer.diskStorage({저장 위치 + 저장하는 파일의 이름 설정 바꿀수 있음(날짜 추가 등)})
그럼 이제 설정을 마쳤으니 사용을 해보자.
<기본설정>
const upoad = multer({ 저장소 위치 설정})
기본 저장 위치를 설정 한 이후에 사용을 하기 위해서는 아래와 같이 쓴다.
사진 1장 보낼때
upload.single('avatar')
upload.single('avatar')==> [아까 기본 설정한멀터 이름 upload].single("프론트에서 설정한 name")
사진 2장이상:
upload.array('photos', 12)
upload.array('photos', 12)
==> [아까 기본 설정한멀터 이름 upload].array("프론트에서 설정한 name", 사진개수)
멀터 요약
프론트에서 설정해 줄것:
1. enctype="multipart/form-data" 꼭! 추가해주기
2. name꼭 백엔드와 이름 일치시킬것
<input type="file" name="avatar" />
백엔드에서 설정할것
1. 기본 설정하기
const A = multer({사진 저장할 위치설정})
2. 기본설정된것에서 사진 1장/2장이상 받는지에 따라 single, array쓰기
A.single("avatar") 1장
A.array("avatar") 2장 이상
사진과 동영상 두개 같이 업로드 하기: fields
single과 array는 한개의 형식만 가지고 업로드를 하는 것이었다면
upload.fields를 쓰면 사진, 동영상 두개의 정보를 받을 수 있다.
단, fields의 경우 array[]형태로 꼭! 넣어주어야 한다.
참고:
https://github.com/expressjs/multer/blob/master/doc/README-ko.md
https://www.npmjs.com/package/multer