React_Server에 비디오 저장

 

 

1. onDrop func (서버로 비디오file 보내기)

const onDrop = (files)=>{

     let formData = new FormData;

 

    const config={

         header:{'content-type' : 'multipart/form-data'}

    }

 

    formData.append("file", files[0])

//위 내용들이 있어야, axios.post 할 때 오류가 생기지 않는다.

 

 

Axios.post('/api/video/uploadfiles', formData, config)

   .then(response=>{

         if(response.data.success){

 

         }else{

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

         }

    })

}

 

 

 

2. 받은 비디오file을 서버에 '저장'

 

 server / routes / video.js     (server route 관리 폴더)

 

//STORAGE MULTER CONFIG

let storage = multer.diskStorage({

    destination:(req,file,cb)=>{         (저장 장소)

        cb(null, "uploads/");

    },

    filename:(req,file,cb)=>{            (파일 이름)

        cb(null, `${Date.now()}_${file.originalname}`);

    },

    fileFilter:(req,file,cb)=>{             (조건 / mp4파일만 등)

        const ext = path.extname(file.originalname)

        if(ext !== '.mp4'){

            return cb(res.statue(400).end('only mp4 is allowed'), false);

        }

        cb(null,true)

    }

})

 

const upload = multer({storage:storage}).single("file");

 

 

3. 사용자에게 파일 경로 전달

router.post('/uploadfiles', (req, res)=>{ 

    upload (req,res,err =>{

        if(err){

            return res.json({success:false, err})

        }

        return res.json({success:true, url:res.req.file.path, fileName:res.req.file.filename})

    })

})