React_비디오 업로드하기

비디오 업로드 LOGIC

1. 비디오 Collection 만들기

 

 1) model 만들기  ( writer - ref.User , timestamps )

 server > models > Video.js 

const Schema = mongoose.Schema;

 

const videoSchema = mongoose.Schema({

    writer : {

        type : Schema.Types.ObjectId, 

        ref : 'User'

    },

}, {timestamps:true} )    :  만든 date와 update한 date가 저장됨.

....................

 

const Video = mongoose.model('Video',videoSchema)

module.exports = { Video }

 

 

2. onSubmit func 만들기

 

  1) <Form>, <Button> 태그에 onSubmit 속성

 

  2) onSubmit func 정의  (useSelector)

 

import {useSelector} from 'react-redux' ;

const user = useSelector (state=>state.user);    (Redux - Store에 user 정보를 가져옴)

 

 

const onSubmit=(e)=>{

        e . preventDefault();

 

        const variables={

            writer:user.userData._id,    // Redux.state.user. 정보에서 가져온다.

            title:VideoTitle,            // title 포함 나머지들은 useState 에서 가져온다.

            description:Description,

            privacy:Private,

            filePath:filePath,

            category:Category,

            duration:Duration,

            thumbnail:ThumbnailPath

        }

    }

 

  3) server로 axios 하기 (setTimeout)

const onSubmit=(e)=>{

        e . preventDefault();

        const variables={

            writer:user.userData._id,

            title:VideoTitle,            //이후 나머지들은 state

            description:Description,

            privacy:Private,

            filePath:filePath,

            category:Category,

            duration:Duration,

            thumbnail:ThumbnailPath

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

            .then(response=>{

                if(response.data.success){

                    message.success('성공적으로 업로드를 했습니다.')

 

                    setTimeout(()=>{

                        props.history.push('/')

                    },3000)

                }else{

                    alert('비디오 업로드에 실패했습니다.')

                }

            })

        }

    }

 

 

3. MongoDB에 데이터 저장

 

 server > routes > video.js 

: save

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

 

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})

    })

})