filepond with spring vue js 파일 업로드

filepond vue js 파일 업로드 (추천)

https://github.com/pqina/filepond

A JavaScript library that can upload anything you throw at it, optimizes images for faster uploads, and offers a great, accessible, silky smooth user experience.

위와 같은 라이브러리 인데 

사용방법이 정말로 간단하다 .

일단 설치 법은

npm install filepond --save

npm install vue-filepond --save

npm install filepond-plugin-file-validate-type --save  (플러그인 설치 옵션 사항이다)

<template>
  <div id="app">

    <file-pond
        name="test"
        ref="pond"
        label-idle="Drop files here..."
        allow-multiple="true"
        accepted-file-types="image/jpeg, image/png"
        server="/api"
        v-bind:files="myFiles"
        v-on:init="handleFilePondInit"/>

  </div>
</template>

<script>
// Import Vue FilePond
import vueFilePond from 'vue-filepond';

// Import FilePond styles
import 'filepond/dist/filepond.min.css';

// Import FilePond plugins
// Please note that you need to install these plugins separately

// Import image preview plugin styles
import 'filepond-plugin-image-preview/dist/filepond-plugin-image-preview.min.css';

// Import image preview and file type validation plugins
import FilePondPluginFileValidateType from 'filepond-plugin-file-validate-type';

// Create component
const FilePond = vueFilePond(FilePondPluginFileValidateType);

export default {
    name: 'app',
    data: function() {
        return { myFiles: ['cat.jpeg'] };
    },
    methods: {
        handleFilePondInit: function() {
            console.log('FilePond has initialized');

            // FilePond instance methods are available on `this.$refs.pond`
        }
    },
    components: {
        FilePond
    }
};
</script>

위와 같이 샘플 코드를 사용 하면 된다.

서버쪽은

일반

        response.setContentType("text/plain");
        response.setCharacterEncoding("UTF-8");
        MultipartHttpServletRequest multipartHttpServletRequest = (MultipartHttpServletRequest) request;
        Iterator<String> itr =multipartHttpServletRequest.getFileNames();
        MultipartFile mfile = null;
        while(itr.hasNext()) {
            String filename = itr.next();
            System.out.println(filename);
            mfile = multipartHttpServletRequest.getFile(filename);
            String origName;
            origName=new String(mfile.getOriginalFilename());
            if ("".equals(origName))
            {
                continue;
            }
            String path = "c://";
            File serverFile = new File(path +origName );
            mfile.transferTo(serverFile);
        }
       
        response.getWriter().print("12345");

와 같이 일반 multipartHttpServletRequest 을 사용 하면 된다.

중요한것은 업로드 사항이 UI에 업데이트 된다는 것이다.

기타 다른 업로드들은 client에서 1MB 씩 보내고  서버쪽에서 대략 1MB 마다 상황을 client 쪽으로 보내 주는데

그렇게 해서 업로드상황을 보여주지만

이 라이브러리는 그런게 없다  자체 적으로 업로드 상황을 추가 코드 없이 보여 주는게 매운큰 장점 인것 같다.

업로드 상황을 마치고 나면

server="/api"

로 설정한 부분을 파일 통째로 콜해주는데 단순히 저장만 하면된다.

매우 심플하다.