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;