drag and drop 파일 업로더 (vue-simple-uploader)

vue-simple-uploader

---

제가 사용한 파일 업로드 라이브러리는 

위의 업로더 입니다. 

홈페이지 : https://github.com/simple-uploader/vue-uploader

입니다. 

vue-uploader 는  https://github.com/simple-uploader/Uploader  의 라이러러리를  vue js 로 사용하기 편하게 하기 위해서 만들어진 

라이브러리 입니다. 

1. npm install simple-uploader.js --save  

설치를 해줍니다. 

2. npm install vue-simple-uploader --save

설치 해 줍니다. 

그리고 npm build 시에 

Unexpected token: name (parent) [./~/vue-simple-uploader/src/common

와 같은 에러를 볼수가있습니다. 

webpack.base.conf.js 

에 

module: {

rules: [

{

test: /\.vue$/,

loader: 'vue-loader',

options: vueLoaderConfig

},

{

test: /\.js$/,

loader: 'babel-loader',

include: [resolve('src'), resolve('test')]

},

{

test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,

loader: 'url-loader',

options: {

limit: 10000,

name: utils.assetsPath('img/[name].[hash:7].[ext]')

}

},

{

test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,

loader: 'url-loader',

options: {

limit: 10000,

name: utils.assetsPath('media/[name].[hash:7].[ext]')

}

},

{

test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,

loader: 'url-loader',

options: {

limit: 10000,

name: utils.assetsPath('fonts/[name].[hash:7].[ext]')

}

}, {

test: /\.js$/,

loader: 'babel-loader',

include: [resolve('src'), resolve('test'), resolve('node_modules/vue-simple-uploader/')]

}

]

}

위와 같이 node_modules/vue-simple-uploader/

 

을 추가해 줍니다.  

그리고 사용 하려는 vue 컴포넌트의 <script> 태그 안에 

import uploader from '../../node_modules/vue-simple-uploader/src/components/uploader.vue'

import 를 해줍니다. 

그리고 

components : {

uploader,

},

components 을 추가해 줍니다. 

그리고 <template> 태그 안에

<uploader :options="options" :file-status-text="statusText" class="uploader" ref="uploader"></uploader>

콤포넌트를 추가 합니다. 

data: function (){

return {

no : 0,

options: {

target: '/W_Server/suggestion_file_upload'+'?doc_number = '+this.no + '&',

testChunks: false,

},

statusText: {

success: '완료',

error: '에러',

uploading: '업로드중',

paused: '일시중지',

waiting: '대기중'

}

}

옵션은 위와 같이 사용 됩니다. 

<style>

.uploader {

width: 880px;

padding: 15px;

margin: 40px auto 0;

font-size: 12px;

box-shadow: 0 0 10px rgba(0, 0, 0, .4);

}

.uploader .uploader-btn {

margin-right: 4px;

}

.uploader .uploader-list {

max-height: 440px;

overflow: auto;

overflow-x: hidden;

overflow-y: auto;

}

</style>

target 은 post 로 Multipart 형식으로 보내는 주소 입니다. 

그리고 뒤에 ?doc_number 보낼때 추가 적인 정보가 필요해서 덧붙인 정보 입니다. 

testChunks 은 target 에 파일 업로드가 가능한지에 대한 테스를 한뒤에 파일 전송을 하기 위한것인데 

저는 false 로 사용하지 않았습니다. 

statusText  는 보시다 시피 상황에 대한 말이 기본적으로 중국어 이기 때문에 한국어로 바꾸어 줬습니다. 

위와 같이 설정 하면 vue 쪽 코딩은 완료 되었습니다. 

그외  옵션은 https://github.com/simple-uploader/Uploader  에서 알아 보시면 됩니다. 

이제 서버 쪽을 구성 해야 하는데  

서버쪽의 로직은   https://github.com/flowjs/flow.js  에서 사용한 로직을 사용 해야 합니다. 

구글링으로 서버쪽 파트는 flow 에서 사용하는 코드쪽 조금 수정을 해서 사용하면 됩니다. 

저는 Spring Framework 을 사용 하니 Spring Framework 에 대해서 적어 넣도록 하겠습니다 

▼서버쪽 소스 

http://idlecomputer.tistory.com/131?category=791973

 

npm run dev 시 

Unknown plugin "add-module-exports" specified  

에러가 날수 있습니다. 

npm install babel-plugin-add-module-exports --save

을 설치해 주세요.