[vuejs] Dropzone vue3로 파일 드래그앱드롭 업로드 구현하기

Vue3에서 파일 업로드를 쉽게 구현할 수 있는 Vue3-Dropzone 라이브러리의 사용법

이 라이브러리를 사용하면 사용자들이 파일을 마우스로 드래그하여 업로드할 수 있는 기능을 간편하게 구현 가능합니다

 

 

1. 설치 및 환경 설정
Vue3-Dropzone을 사용하려면 먼저 프로젝트에 설치해야 합니다.

다음 명령어를 사용하여 설치할 수 있습니다.

npm install vue3-dropzone

 

2. 설치가 완료되면, 사용할 Vue 컴포넌트에 import

import { useDropzone } from "vue3-dropzone";

3. 템플릿 구현

// HTML 템플릿
<div class="upField cm-ac mt10 mb10" v-bind="getRootProps()" :class="{isDragActive,}">
    <input multiple v-bind="getInputProps()"  type="file">
    <span>파일을 마우스로 끌어 추가해주세요</span>
</div>

4. Vue3-Dropzone 사용

export default {
    created() {
        function onDrop(acceptedFiles, rejectReasons) {
            console.log('acceptedFiles', acceptedFiles)
            if (rejectReasons) {
                console.log('rejectReasons', rejectReasons)
            }
            if (acceptedFiles) {
                this.onUploadFile(acceptedFiles)
            }
        }
        const { getRootProps, getInputProps } = useDropzone({ 
            onDrop: onDrop.bind(this)
        });
        this.onDrop = onDrop;
        this.getRootProps = getRootProps;
        this.getInputProps = getInputProps;
    },
    methods: {
        onUploadFile(files){
            if(files.length > 0) {
                var fileArr = [];
                Array.from(files).forEach(async file => {
                    let base64 = await this.$base64(file);
                    let idIdx = this.dataObj.fileIds.length + 1;
                    
                    // 로직 구현
                });
            }
        },
    }
}

 

dropzone 홈페이지에서 옵션에 대해서 확인 가능합니다

https://www.dropzonejs.com/