[JavaScript, Node.js] 유튜브 클론 정리 8장 (3) - 비디오 업로드

머리글

이번 시간에는 비디오를 업로드해보자.

비디오 업로드

우선 파일 업로드와 마찬가지로 업로드할 자리를 만들어주자.

    form(method="POST", enctype="multipart/form-data")
        label(for="video") Video File
        input(type="file", accept="video/*", required, id="video", name="video")

모든 형식의 비디오를 accept 했고, required 옵션으로 필수로 넣게 지정했다.
그리고 multer를 사용하기 위해 enctype를 설정해 주었다.

그리고 미들웨어를 생성해 주자.
기존의 아바타와 같은 미들웨어를 사용해도 상관은 없지만,
파일 사이즈의 제한을 위해서 하나 더 생성해 보자.

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

limit 옵션은 여러 가지를 둘 수 있고
그중 하나인 fileSize 옵션으로 파일의 용량을 제한할 수 있다.
이때, Byte를 기준으로 하므로 지금은 10MB의 제한을 두었다고 할 수 있다.

그리고 업로드와 관련된 컨트롤러도 살짝 수정해 주자.

...
	const file = req.file;
    ...
    try {
    	await Video.create({
        	...
            fileUrl: file.path,
            ...

이런 식으로 req.file을 이용해서 파일의 path를 받아준다.

그리고 비디오 스키마에 fileUrl을 추가해 주어야 한다.

const videoSchema = new mongoose.Schema({
	...
    fileUrl: { type: String, required: true },
    ...

이제 비디오 파일 없이는 게시글을 업로드하지 못하게 되었다.

이제 업로드해 보면 비디오 파일을 videos 폴더에서 찾을 수 있다.

이 경로를 이용해서 watch 페이지에 비디오를 추가하자.

extends base

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

controls 옵션은 비디오 컨트롤러를 추가하기 위해 사용했다.

마무리

이번 시간에는 비디오 업로드에 대해서 알아보았다.

다음 시간에는 유저의 프로필 페이지를 생성해 보자.