본문 바로가기

Youtube Clone Coding

영상 파일 업로드

이제 동영상을 올려본다. 일단 upload.pug에 영상을 업로드 할 수 있는 input을 만들어준다.

lable(for="video") 영상 파일
input(type="file",accept="video/*",required,id="video",name="video")

그리고 영상을 올리기 위한 multer 미들웨어를 하나 만들어준다.

export const videoUpload = multer({
    dest: "uploads/videos/", limits: {
        fileSize: 10000000,
    }
})

이때 fileSize는 말그대로 올리는 파일의 최대 크기이고, 바이트 단위이다. 10000000은 10메가 바이트 이다. 이제 videoRouter에서 postUpload가 호출되기 전에 미들웨어로서 videoUpload를 먼저 호출한다.

이제 postUpload가 호출된다. postUpload에서는 영상의 url이 직접적으로 저장되어야 하므로 다음의 코드를 추가한다.

const { path: fileUrl } = req.file;

await Video.create({
   title: title,
   description: description,
   fileUrl,
   owner: _id,
   hashtags: Video.formathashtags(hashtags),
});

multer는 req.file을 사용할 수 있게 해주고 이 안에 path가 있다. const { path: fileUrl } = req.file 은 변수 이름은 fileUrl로 하고, req.file.path를 가져와라. 이런 뜻이다. 그리고 create() 에 추가해준다. 이제 영상을 페이지에서 보여주어야 한다. 따라서 watch.pug에 가서 다음과 같은 코드를 추가한다.

video(src="/" + video.fileUrl,controls)

controls는 영상의 컨트롤러 이다. 재생하고 멈추고 하는 그런거....

이제 영상을 볼 수 있다. ㅋㅅㅋ

'Youtube Clone Coding' 카테고리의 다른 글

Video와 User 모델 연결 & 영상 보여주기  (0) 2022.11.22
유저 프로필 페이지  (2) 2022.11.22
파일 업로드  (0) 2022.11.21
비밀번호 변경  (0) 2022.11.21
사용자 프로필 수정  (0) 2022.11.17