filepond를 이용한 파일 업로드

Filepond와 multer을 이용하면 filePond로 클라이언트단에서 데이터를 쉽게 서버로 전송 할 수 있고 (업로드까지 제공)

multer를 이용하여 서버에 데이터를 쉽게 저장할 수 있다.

 

아래에 Client단과 Server단의 예제 코드를 공유하고자 한다.

 

https://github.com/expressjs/multer/blob/master/doc/README-ko.md

GitHub - expressjs/multer: Node.js middleware for handling `multipart/form-data`.

 

https://github.com/pqina/filepond

GitHub - pqina/filepond: 🌊 A flexible and fun JavaScript file upload library

 

 

 

 

NPM 설치
 
npm install filepond --save
npm install vue-filepond --save
npm install filepond-plugin-file-validate-type --save

 

Client쪽 (Vue JS 사용)

<template>
  <div>
            <file-pond
                name="uploadName"
                ref="pond"
                label-idle="Drop files here..."
                allow-multiple="true"
                maxParallelUploads="50"
                maxFiles="50"
                server="/api"
                v-bind:files="fileList"
                v-on:init="handleFilePondInit"
                v-on:error="handleError"
                v-on:updatefiles="handleFilesUpdated"/>
  </div>
</template>
 
 
<script>
import vueFilePond from 'vue-filepond';
import 'filepond/dist/filepond.min.css';
import 'filepond-plugin-image-preview/dist/filepond-plugin-image-preview.min.css';
import FilePondPluginFileValidateType from 'filepond-plugin-file-validate-type';
 
// Create component
const FilePond = vueFilePond(
    FilePondPluginFileValidateType,
    FilePondPluginImagePreview
);
 
export default {
    name: 'app',
    components: {
        FilePond
    }
    data: function() {
        return {
        	fileList: [],
        };
    },
    methods: {
        handleFilePondInit: function() {
            console.log('FilePond has initialized');
            this.fileList = [];
        },
        handleError: function() {
            console.log('FilePond Error');
        },
        handleFilesUpdated: function(fileList) {
            console.log('FilePond has updated : ', fileList);
            this.fileList = fileList;
        }
    },
};
</script>

 

 

 

Server쪽 NodeJS 사용

 

const router = require('express').Router();
const multer = require('multer');
const fs = require('fs');
 
var storage = multer.diskStorage({
  destination: function (req, file, cb) {
    	dir = "./files/"
        fileName = file.fieldname; // filepond에서 name으로 주는 값
        
        if (!fs.existsSync(dir + fileName)) {
        	fs.mkdirSync(dir + fileName, { recursive : true }); 
        }
        
        cb(null, dir + directoryName);
  },
    fileName: function (req, file, cb) {
    	cb(null, getFile(file));
    }
});
 
function getFile(file) {
  const originalFile = file.originalname;
    return originalFile;
}
 
 
var upload = multer({
  storage: storage,
    limits: { fileSize: 1024 * 1024 * 50 } // 50Mb
});
 
module.exports = router;