Multer 이용 서버에 비디오 저장

onDrop 구현을 해주고 

   const onDrop = (files)=>{
        let forData = new forData;
        const config = {
            header : {'content-type': 'multipart/form-data'}
        }
        forData.append("file",files[0])//첫번째 가져오기 위해 array 사용
       // console.log(files)//파일의 파라미터가 저장됨
        Axios.post('/api/video/uploadfiles',forData,config)
        .then(response=>{
            if(response.data.success){

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

우선 이렇게 선언하고 

그전에 서버를 구현을 안해놨으니 구현을 합시다. 

 

server/ routers/ video.js

video.js를 생성하고 우선

const express = require('express');
const router = express.Router();
const { Video } = require("../models/User");

const { auth } = require("../middleware/auth");

//=================================
//             Video
//=================================
router.post('/api/video/uploadfiles')

module.exports = router;

선언하고 

index.js 부분으로 가서 

저렇게 아래 video를 생성하여 여기서 

저걸 통해 video 라우터로 갑니다. 

 

router.post('/api/video/uploadfiles')

그럼 여기서 이걸

router.post('/uploadfiles')

이렇게 쓰면되고,

 

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

    //비디오를 서버에 저장한다. 

    

})

이렇게 선언합니다. 

req는 우리가 비디오를 받아오는 곳입니다.

우선 다운받을것은 

npm install multer --save 

이걸 다운을 해주고

const multer = require("multer");
//storage multer config
let storge = multer.diskStorage({
    destination : (req,file,cb)=>{
        cb(null,"uploads/");
    },
    filename: (req, file, cb)=>{
        cb(null,'${Date.now()}_$file.originalname}');
    },
    fileFilter: (req,file,cb)=>{
        const ext = path.extname(file.originalname)
        if(ext!='.mp4'){
            return cb(res.status(400).end('only jpg, png, mp4 is allowed'),false);
        }
        cb(null,true)
    }
});
const upload = multer({storage: storage}).single("file");
//=================================

그리고 일단 제일 상단에 uploads 폴더 생성

   destination : (req,file,cb)=>{

        cb(null,"uploads/");

    },

//이것은 파일을 업로드 하면 아까 만든 그폴더에 저장이되는것 입니다.

   filename: (req, file, cb)=>{

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

    },

//어떠한 파일 이름으로 저장할것인지 하는것이고

fileFilter: (req,file,cb)=>{

        const ext = path.extname(file.originalname)

        if(ext!='.mp4'){

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

        }

        cb(null,true)

    }

//동영상 파일 확장자 지정해주는것 

그리고 마무리로

const upload = multer({storage: storage}).single("file");
//=================================
//             Video
//=================================
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.filename })
    })
})

이런식으로 채워주면 됩니다.