[유튜브 클론코딩] 3.6 Uploading and Creating a Video

3.6 Uploading and Creating a Video

Video가 아닌 파일을 업로드하지 못하게 설정하기

우선 할 건 Video가 아닌 file을 업로드하지 않게 해야한다.

upload.pug에서 비디오 파일만 받도록 accept="video/*"를 다음과 같이 추가한다.

 

extends layouts/main

block content 

    .form-container 

        form(action=`/videos${routes.upload}`, method="post")

            label(for="file") Video File

            input(type="file", id="file", name="file" ,required=true, accept="video/*")

            input(type="text",name="title", placeholder="Name" ,required=true)

            textarea(name="description", placeholder="Description" ,required=true)

            input(type="submit", value="Upload Video")

↑ upload.pug

다음과 같이 수정하면 된다. (line 6, accept="video/*")

 

upload페이지에서 파일을 업로드하면 무슨 일이 일어나는가?

비디오를 업로드할 때엔 postUpload를 사용하기 때문에 여기서 console로 확인해본다.

 

아무 이미지,제목,설명을 작성하고 업로드 버튼을 누르면 이렇게 뜨는 것을 볼수가 있다.

그런데 이 경우 이렇게 이름을 원하는게 아니라 우리가 원하는 것은 실제 위치,location이다

어떤 서버에 있는 location. 내 서버일 수도 있고, 아마존 서버일 수도 있다.

이건 엄청 중요한 것이다. file 그 자체를 저장하는 것이 아니라 그 file의 location을 저장하는 것이다.

 

multer 이용하기

• 사용자가 앱에게 전달하는 정보는 크게 "텍스트"와 "파일" 2가지로 나눌 수 있다.
• 사용자가 파일을 앱에게 전달하는 방법은 다음과 같다.
• 파일 선택 form
• 파일 선택 후 submit 버튼을 눌르면 파일 전송
• 루트 디렉토리 내 uploads 폴더에 전송된 파일이 저장
• 전송된 파일명을 화면에 표시

• express는 사용자가 업로드한 파일을 받아서 저장하는 기본 기능을 제공하지 않으므로 multer라는 모듈을 설치해서 사용자가 전송한 파일을 처리하는 작업을 해야한다
• multer란 사용자가 업로드한 file을 처리하는 모듈이다.
• multer의 기능 중에서 파일을 업로드하고 URL을 변환하는 기능을 사용하면 된다.
• 설치: npm install multer로 설치한다.

 

그리고 우리의 Upload Form의 enctype= multipart/form-data를 추가해야 한다. (이것을 추가해야 사용자가 전송한 파일을 서버로 전송할 수 있음)

 

extends layouts/main

block content 

    .form-container 

        form(action=`/videos${routes.upload}`, method="post", enctype="multipart/form-data")

            label(for="file") Video File

            input(type="file", id="file", name="file" ,required=true, accept="video/*")

            input(type="text",name="title", placeholder="Name" ,required=true)

            textarea(name="description", placeholder="Description" ,required=true)

            input(type="submit", value="Upload Video")

↑ upload.pug

 

 

middlewares.js에 multer 작성하기

middlewares.js에서 multer를 import해주고 다음과 같은 코드를 추가한다(https://github.com/expressjs/multer/blob/master/doc/README-ko.md 에서 보면 사용방법 있는데 그거보고 한 것)

 

import multer from "multer";

import routes from './routes';

const multerVideo = multer({dest: "videos/"});

export const localsMiddleware = (req, res, next) => {

    res.locals.siteName = "MyTube";

    res.locals.routes =  routes;

    res.locals.user = {

        isAuthenticated: true,

        id: 1

    }

    next();

};

export const uploadVideo = multerVideo.single("videoFile");

dest: 저장될 폴더 이름을 지정하는 것이다.

.single(): 오직 하나의 파일만 upload할 수 있는 걸 의미한다. .single("videoFile") 안에 들어갈 매개변수는 fom을 통해 전송되는 파일의 name 속성을 가져야 한다. 즉, 여기서는 upload.pug에서 name인 것이다.

 

 

import express from "express";

import { deleteVideo, editVideo, getUpload, postUpload, upload, videoDetail, videos } from '../controllers/videoController';

import { uploadVideo } from '../middlewares';

import routes from "../routes";

const videoRouter = express.Router();

videoRouter.get(routes.upload, getUpload);

videoRouter.post(routes.upload, uploadVideo, postUpload);

videoRouter.get(routes.videoDetail(), videoDetail);

videoRouter.get(routes.editVideo, editVideo);

videoRouter.get(routes.deleteVideo, deleteVideo);



export default videoRouter;

↑ videoRouter.js

다 했다면 videoRouter로 가서 이 부분을 추가한다.

 

 

export const postUpload = (req, res) => {

    const {body, file} = req;

    //To Do: Upload and save video

    console.log(body,file);

    res.redirect(routes.videoDetail(324393));

};

videoController.js에서 여기를 이렇게 수정해주고

실제로 파일을 업로드해본다.

(위에서 말했듯이 req.body에는 텍스트 정보가, req.file에는 파일 정보가 전송되기 때문에 저렇게 확인해보는 것임)

 

그러면 console에 이렇게 뜨는 것을 볼 수가 있는데, 우리는 이 req.file안에 있는 path가 필요하다.

(path: 실제 파일의 위치)

이제 실제 url이 있으니까 video를 만들어본다. 이제 완전 실전이다.

 

실제 URL을 가지고 video를 만들어보기

export const postUpload = async(req, res) => {

    const {

        body: {title,description},

        file: {path}

    } = req;

    const newVideo = await Video.create({

        fileUrl: path,

        title, //title: title을 줄여서 쓴 것임

        description //description: description을 줄여서 쓴 것임

    });

    console.log(newVideo);

    //To Do: Upload and save video

    res.redirect(routes.videoDetail(newVideo.id));

};

↑ videoController.js

다음과 같이 작성하면 된다.