[multer lib] - 서버에 비디오 저장하기

이전에 Dropzone lib 설정한 부분에 onDrop func 이어서 구현하기

// VideoUploadPage.js

<Dropzone onDrop={onDrop} multiple={false} maxSize={1000000000}>
    {({ getRootProps, getINputProps }) => (
        <div {...getRootProps()}>
            <input {...getInputProps()} />
        </div>
    )}
</Dropzone>



// onDrop func
// axios로 서버로 전송
const onDrop = (files) => {
    let formData = new FormData();
    
    const config = {
        header: { "content-type": "multipart/form-data" },
    };
    formData.append("files", files);
    console.log("files", files);
    
    Axios.post("/api/video/uploadfiles", formData, config).then((response) => {
        if(response.data.success) {
            console.log("uploadfiles success", response.data);
        } else {
            alert("비디오 업로드 실패");
        }
    });
};

 

• 노드 서버에 파일 저장
  • npm install multer --save   (in server directory)
  • server route에서 옵션 설정

multer?
파일 업로드를 위해 사용되는 multipart/form-data를 다루기 위한 node.js의 미들웨어

// video.js (server > routes > video.js)


const express = require("express");
const router = express.Router();
const multer = require("multer");

// Storage multer config
const storage = multer.diskStorage({
    destination: (req, file, cb) => {    // 파일 저장소 => upload
        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") {          // 파일 유형(.mp4만), ex) if(ext !== ".mp4" || ext !== ".png") => mp4 또는 png파일만
            return cb(res.status(400).end("only mp4 is allowed"), false);
        }
        cb(null, ture);
    },
});


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

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

 

[결과]