[클론코딩] 따라하며 배우는 노드, 리액트 시리즈 - 유튜브 사이트 만들기 #4. Multer로 노드 서버에 비디오 저장하기

 

 

---

0. onDrop func 만들기

저번에 Dropzone에 있는 onDrop을 설정하지 않았다

그래서 파일을 올렸는데도 아무런 반응이 나타나지 않은 것이다

          <Dropzone
          onDrop={onDrop}
          multiple={false} // 한 번에 파일 하나 or 여러개
          maxSize={10000000000}>

multiple은 한 번에 파일을 여러개 올릴 건지 하나 올릴 건지 정하는 것이다

 

그리고 위에서 onDrop 함수를 작성해준다

  const onDrop = (files) => {
    let formData = new FormData;
    const config = {
      header: {'content-type': 'multipart/form-data'}
    }
    formData.append("file", files[0])

    console.log(files)

    // Axios 이용하여 request를 서버에 보냄
    // 위에 것들 보내주지 않으면 파일에 오류 발생
    Axios.post('/api/video/uploads', formData, config)
    .then(reponse => {
      if(response.data.success) {
        console.log(response.data);
      }else{
        alert('비디오 업로드에 실패했습니다.')
      }
    })
  }

let formData부터 formData.append()까지 보내주지 않으면 파일에 오류가 생겨 꼭 적어줘야 된다고 한다

 

 

 

1. 노드 서버에 파일 저장을 위한 dependencies 다운

파일 업로드를 위해 multer를 다운받아주자

npm install multer --save

 

Multer는 파일 업로드를 위해 사용되는 Node.js의 미들웨어이다

단일/다중 파일 업로드를 지원하고, 다양한 파일들을 멀티파트 형식(multipart/form-data)으로 업로드한다

 

 

 

2. 비디오 파일을 서버로 보내기

다운받았으면 server 폴더 안에 있는 routes 폴더에 video.js를 생성해주자

서버 폴더를 보면 이와 같이 구성되어 있다

 

users.js와 틀이 비슷하므로 복붙해오고, 필요없는 건 지워준다

<video.js>

const express = require('express');
const router = express.Router();
const { Video } = require("../models/User"); // 나중에 필요함

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

//=================================
//             Video
//=================================


module.exports = router;

 

이후에 

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) => {
    if (file.mimetype == 'video/mp4' ) {
      cb(null, true);
      } else {
     
      cb({msg:'mp4 파일만 업로드 가능합니다.'}, false);
     
      }
  }
});

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

을 작성해준다

 

storage : 저장할 공간에 대한 정보

diskStorage : 하드디스크에 업로드 파일을 저장함

destination : 저장할 경로

filename : 저장한 파일명 (날짜+파일명)

fileFilter : 지원되는 형식

 

 

 

3. 서버에 저장하기

server 폴더에 있는 index.js에 코드 하나를 추가한다

app.use('/api/video', require('./routes/video'));

 

그 다음 video.js에서 post를 해준다

router.post('/uploads', (req, res) => {
  // files을 보냄
  // request를 통해 파일받기
  // 비디오를 서버에 저장

  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})
    // url : 파일 업로드 하면 업로드 폴더 안에 들어감
  })

})

 

이러면 uploads 폴더에 동영상이 저장되는 것이다

 

 

 

4.파일 저장 경로를 클라이언트에게 전달해주기

한 번 동영상을 올려봤다

console.log(files)

 

console.log(response.data)

url, fileName이 잘 저장되어있다

 

uploads 폴더를 확인해보면

uploads 폴더 안에 동영상이 들어와있는 것을 확인할 수 있다