WEB

비디오 업로드 하기

KyeongMin 2021. 3. 3. 21:03
728x90
반응형

 이렇게 비슷하다고 생각하다고 알고 있으면 좋습니다. 

 

우선 해야하는것은 비디오의 collection을 만들어야합니다. 

 

거기에 들어가는 것이

 

Video

+ writer

+ title

+ description

+ privacy

+ filePath

+ category

+ views

+ duration

+ thumbnail

이렇게 들어간다 생각합시다. 

 

1. server의 models에 가서 Video.js를 만들어줍니다. 

const mongoose = require('mongoose');
const Schema = mongoose.Schema;
const videoSchema = mongoose.Schema({
    writer : {
        type: Schema.Types.ObjectId,
        ref: 'User'//이렇게 하면 User모델에서 전부 불러올 수 있다.
    },
    title : {
        type: String,
        maxlength: 50
    },
    description: {
        type: String,
    },
    privacy: {
        type: Number,
    },
    filePath: {
        type: String,
    },
    category: {
        type: String,
    },
    views: {
        type: Number,
        default: 0
    },
    duration: {
        type: String,
    },
    thumbnail: {
        type: String,
    }
},{timestamp: true})
const Video = mongoose.model('Video', videoSchema);

module.exports = { Video }

이렇게 생성하고 

VideoUploadPage.js부분으로 가서 

onSubmit = {onSumbit}

이거랑

 

onClick옆에 써주고 function을 만들어줍니다.

 

 

  const onSubmit = (e)=>{

        e.preventDefault();//클릭하면 하려고 한것을 방지할 수 있다.

        const variables = {

            writer: ,

            title: ,

            description: ,

            privacy: ,

            filePath: ,

            category: ,

            duration: ,

            thumbnail: ,

        }

        Axios.post('api/video/uploadVideo',variables)

    }



 

이때 유저ID를 가져오는것 리덕스를 통해 가져올 수 있는데

import { useSelector } from 'react-redux';

이를 선언하고 

 

ㅇ

    const user = useSelector(state=> state.user);//state로 가서 유저 정보 가져오는것 

 

일단 이런것이고

const onSubmit = (e)=>{
        e.preventDefault();//클릭하면 하려고 한것을 방지할 수 있다.
        const variables = {
            writer: user.userData._id,
            title: VideoTitle,
            description: Description,
            privacy: Private,
            filePath: FilePath,
            category: Category,
            duration: Duration,
            thumbnail: ThumbnailPath,
        }
        Axios.post('api/video/uploadVideo',variables)
        .then(respones=>{
            if(respones.data.success){
                
            }else{
                alert('비디오 업로드에 실패 했습니다.')
            }
        })
    }

 

해주고 api/video/uploadVideo 라우터 생성을 위해 

 

서버에 routes / video.js부분에서 

const { Video } = require("../models/User");

이거 임폴트하고 

router.post('/uploadVideo',(req,res)=>{
    //비디오를 정보를 저장한다. 
    const video=new Video(req.body)
    video.save((err,doc)=>{
        if(err) return res.json({success: false, err})
        res.status(200).json({success: true})
    })
})

이렇게 하면 몽고디비에 저장이된다. 

저장된것이고,

props 적어주고 


        Axios.post('/api/video/uploadVideo',variables)
        .then(respones=>{
            if(respones.data.success){
                //console.log(respones.body)
                message.success('성공적으로 업로드를 했습니다.')
                setTimeout(()=>{
                    props.history.push('/');
                },3000);
            }else{
                alert('비디오 업로드에 실패 했습니다.')
            }
        })
    }

 

이렇게 해주면 3초뒤에 화면이 전환됩니다. 

랜딩 페이지가 보이면 성공

 

 

728x90
반응형