brunch

video upload & create(2)

by 이종복

이번 글은 이전 글에 이어서 video upload & create에 대해서 다루겠습니다.


1) 우선, postUpload 컨트롤러에 다음과 같은 코드를 추가해줍니다.

이 코드는 파일이 성공적으로 업로드되었을 때,

콘솔창에서 확인할 수 있도록 하는 목적이 있습니다.

hello245.png


2) localhost:3000/videos/upload 페이지로 이동해서

(1)파일 선택을 누르고

(2)새로운 동영상을 선택하고

(3)Upload Video를 클릭합니다.

hello235.png
hello236.png
hello237.png


3) 다음과 같이 upload가 잘되었고,

비디오 파일과 관련된 정보가 출력됨을 확인할 수 있습니다.

hello239.png


4) 또한 다음과 같이 videos 폴더가 생성되고, 파일의 path가 기록됨을 확인할 수 있습니다.

hello240.png


5) 다음은 postUpload 컨트롤러로 이동해서, 코드를 다음과 같이 수정해줍니다.

이 코드의 의미는 다음과 같습니다.

(1) 앞의 upload를 통해서 파일의 url, 즉, path를 알게 되었기 때문에,

const file: {path}를 추가해줍니다.
(2) const newVideo를 선언해줍니다. 여기에는 fileUrl, title, description이 포함됩니다.

(3) console.log(newVideo)를 추가해줌으로써, 실행의 결과를 확인할 수 있게 합니다.

(4) upload가 완료되면, res.redirect(routes.videoDetail(newVideo.id)로 다시 연결해줍니다.

hello241.png


6)다시 localhost:3000/videos/upload 로 이동해서

비디오 파일을 추가해주면

hello242.png


7) 다음과 같이 Video Schema에 만들었던 정보들이 출력되는 것과

hello244.png


8) videoDetail 페이지로 이동하는 것을 확인할 수 있습니다.

hello243.png

"다음은 노마드코더(https://academy.nomadcoders.co/)의 [초급 풀스택] 유튜브 클론 코딩 강의를 참고하였습니다."

keyword
매거진의 이전글video upload & create(1)