Express - Uploading and Creating a Video

저번에 db를 홈컨트롤러에 연결했다.

근데 upload를 해야 db에 쌓든 불러오든 할 수 있으니 upload controller도 손보자

저번에도 포스팅 했듯이 파일 자체를 데이터베이스에 저장하지 않는다. 

파일의 url을 텍스트로 넣는 일을 한다.

먼저 우선 유저가 videoController에서 upload할때 무슨 일이 일어나는지 알아보자.

 

우선 시험 삼아 파일 하나를 업로드 하고 콘솔을 찍어보면 file name, title, descritption이 찍힌다

하지만 파일 네임을 원하는게 아닌 파일의 주소가 필요하다.

자 우선 upload.pug에 가서 이미지파일이나 다른 파일이 아닌 video파일만 허용해주자

accept 속성을 이용해서 video만 allow해줬다. 

이제 파일을 업로드하면 url로 변환해주는 middleware가 필요하다

바로 multer다 

github.com/expressjs/multer/blob/master/doc/README-ko.md

expressjs/multer

www.npmjs.com/package/multer

multer

 

우선 npm install multer를 해주고 설치가 완료되면 업로드템플릿에 가서 사용하기 위한 셋팅을 하는데

바로 form에 enctype="multerpart/form-data" 속성을 넣어주자. 아마도 인코딩 타입을 정하는 것 같다.

그리고 실제 비디오파일 업로드할 인풋버튼에 name을 videoFile로 정하고서 

미들웨어파일로 가서 뮬터 미들웨어를 만들어 주자.

먼저 뮬터를 import해주고 multerVideo라는 객체를 만들어서 선언해준다. 

 

expor해줄때는 다른 변수를 선언해서 single method를 써서 한개씩 올린다.

이제 뮬터 설정을 해줬으니 export한 미들웨어를 라우터에 적용시켜주자

videoRouter로 가서 역시 uploadVideo를 임포트해주고 업로드 포스트방식부분에 미들웨어를 적어주자

그럼 upload로 들어가서 uploadVideo 미들웨어를 거친후 postUpload를 하게 된다~

이제 라우터 설정도 했고 컨트롤러를 마무리 지어주자

컨트롤러로 가서 역시 postUpload컨트롤러도 async - await을 사용해서 비디오를 읽어온 다음 다음 랜더링을 진행하도록 해주고

request로 받아온 부분을 body에 타이틀과 description을 file에는 path를 받아와서

newVideo객체를 만든후 기존 video모델에 설정해뒀던 fileUrl, title, description을 create해주자 await은  이때 쓴다~

 

그리고 업로드하고 newVideo를 보면 

이렇게 모델 스키마대로 값을 받아온다. file url도 설정이 되었다.

이제 Root 디렉토리를 보면 videos 폴더가 생성되어있고 여기에 파일 url이 저장되어있다.

url도 id까지 뜨게 된다~~~

홈화면으로 다시 돌아가보자

내가 업로드한 파일들이 이제 올라와있다~~ db에는 file Url만 저장되어있고~ 엄밀히 말하면 file path 인건가.