분명 공부했는데 또 까먹고 한참 헤맨 나
꼭 다시 공부해야 정리하는 사람 나야 나 ...
s3에 저장하는 법은 다시 사용할 때 정리해야지 ...
1. multer 설치하기
npm i multer
2. 파일을 업로드하는 form에 enctype="multipart/form-data" 추가해 주기
Multer는 multpart가 아닌 form에선 동작 안 하니까 꼭 추가해 주기 🥹
+ 하나의 input에서 여러 이미지나 영상을 받아야 할 때는 속성에 multiple를 추가해줘야 한다.
+ 해당 코드에선 영상 1개, 이미지 1개를 받을 예정이라 추가하지 않음
form.video-upload-form(action="/videos/upload",method="POST",enctype="multipart/form-data")
div
input(name="video" type="file",required)
div
span 썸네일
input(name="thumb" type="file",required)
input(type="submit" value="업로드")
3. 미들웨어파일에 아래의 코드 작성
multer를 꼭 import 해주기!!
[ 옵션 ]
dest or storage : 사용자가 보낸 파일을 넣을 주소
limits - fileSize : 파일의 크기 제한
import multer from "multer";
export const videoUpload = multer(
{
dest:"upload/videos/",
limits:{
fileSize:10000000000,
}
}
)
4. 라우터파일에 미들웨어파일에서 만든 함수 삽입
위의 코드에선 비디오와 썸네일로 쓰일 이미지를 각 하나씩 업로드하기에 fields를 사용했다.
하지만 이외에도 다른 옵션이 존재한다.
----- 미들웨어에서 작성한함수명.옵션(form에서 사용한 fieldname or 빈칸) -----
[ 옵션 종류 ]
.fields(fieldname) : fieldname 인자에 명시된 이름을 가진 한 개의 파일을 전달받는다.
이 파일은 req.file 에 저장되어 접근할 수 있다.
.single(fieldname) : fieldname인자에 명시된 이름의 파일 전부를 배열 형태로 전달받는다.
선택적으로 maxCount에 명시된 값 이상의 파일이 업로드될 경우 에러를 출력할 수 있다.
전달된 배열 형태의 파일은 req.files에 저장된다.
.array(fieldname,maxCount) : fields 인자에 명시된 여러 파일을 전달받는다.
파일 객체는 배열 형태로 req.files 에 저장되어 접근할 수 있다.
.none() : 오직 텍스트 필드만 허용하여 파일이 업로드되었을 경우,
"LIMIT_UNEXPECTED_FILE" 와 같은 에러 코드가 발생한다.
.any() : 전달된 모든 파일을 허용하며 파일 배열은 req.files 에 저장되어 접근할 수 있다.
videoRouter.route("/upload").get(getUpload).post(videoUpload.fields([
{name:"video",maxCount:1},
{name:"thumb",maxCount:1}
]),postUpload);
//예시
//form에서 name이 video인 데이터를 받아와 postUpload로 넘겨준다.
videoRouter.route("/upload").get(getUpload).post(videoUpload.single("video"),postUpload);
//form에서 name이 photos인 파일정보를 배열로 가진다.
videoRouter.route("/upload").get(getUpload).post(videoUpload.array("photos",12),postUpload);
[ 추가정보 ]
브라우저에서 이미지나 영상을 담은 폴더에 접근이 안되기에 static files serving 시킬 것
해당 주소("/upload")에 대해 upload 폴더를 공개해 접근할 수 있도록 한다는 의미!
app.use("/upload",express.static("upload"));
[ 데이터에 들어있는 정보 ]
이렇게 multer를 통해 데이터를 받아오면 req.file or req.files로 접근할 수 있다.
해당 데이터는 아래와 같은 정보를 가지고 있다.
| key | description |
| fieldname | form에서 정의된 필드명 |
| originalname | 업로드한 파일명 |
| encoding | 파일의 엔코딩 타입 |
| mimetype | 파일의 mime 타입 |
| size | 파일의 바이트 사이즈 |
| destination | 파일이 저장된 폴더 |
| filename | destination에 저장된 파일명 |
| path | 업로드된 파일의 정체 경로 |
[참고문헌]
https://github.com/expressjs/multer/blob/master/doc/README-ko.md
댓글