프론트엔드에서 file upload/download

일주일기간의 플젝으로 퍼블리싱 산출물만 내기로 하다 개발까지 하게 되어서 급하게 api 연동을 하게 되니 정신이 없었다.

그렇다고 기간이 일주일 밖에 남지 않은 상황에서 vue로 작업하기엔 내 머리속에 Vue 존재는 희미했다.

 

"안녕~ 잘가 ~ Vue"

"역시나 이런 플젝은 jquery 너 밖에 없다 !!!!!!!!"

"하지만 라우트는 어케하고??????"

"에이 몰라~!"

 

결론 jquery + es6 + axios + tweenmax + bootstrap

역시 이런 건 짬뽕이 쵝오~~~~~

 

하여 플젝은 시작되었고 앵귤러를 했을때 기억을 더듬으면서

es6와 axios를 섞어가며 api연동 작업을 했다.

......................................

......................................

결과는 엉망진창이였다.

 

그중에 제일 고생했던 부분을 기록하고저 이슈가 되었던 부분을 기록해 보려 한다.

 

가만있어보자 맨날 es6를 vue나 angular에서 제공하는대로만 썼지

이걸 어케 로드 시키지??????

 

다행이 아래와 같이 하면 된다. 

<script type="module" src="로드시킬js파일"></script>

 

axios는 vue 할 때 잠깐 써봤는데 괜찮아서 도입해 봤다.

나름 만족....

 

 

 

사용법은 아래 URL에서 간편하게 확인할 수 있다.

https://kapeli.com/cheat_sheets/Axios.docset/Contents/Resources/Documents/index

Axios Cheat Sheet - Kapeli

 

 

upload

- 제일 고생했던 부분이다. File 객체를 어떻게 수정할 수 없어서 특히 고생했다.

이유인 즉슨 해당 File 객체가 read only라서 그러했다.

결국 참조 배열에 담고 편집 삭제등을 진행했고 FormData에 저장. api 연동을 하였다.

 

restapi.js

export default class RestApi{ 
    static BASE_URL='~~~~~어쩌고 저쩌고~~~~~~~~~';

    static setToken(key, value) {
        localStorage.setItem(key, value);
    }
    static getToken(key){
        return localStorage.getItem(key);
    }
    static AUTH={
        headers: {
            'Authorization':`Bearer ${ RestApi.getToken('token') }`
        }
    }
    //......................중간 코드 중략.............................
    
    
    static upload( formData, $progressContainer, $progressbar ) {
        return axios.post(`${RestApi.BASE_URL}/files/uploads`,
            formData, {
                headers: {
                    'Authorization': `Bearer ${ RestApi.getToken('token') }`,
                    'Content-Type': 'multipart/form-data;charset=utf-8;'
                },
                onUploadProgress: function (e) {
                    var per=parseInt( (e.loaded/e.total)*100 );

                    console.log('업로드progress시작=' + per);

                    //여기에 업로드 코드.
                    if( $progressContainer.hasClass('is-uploading') ){
                        $progressContainer.fadeIn();
                        //progress-bar
                        $progressbar.css({width:`${per}%`})
                     
                    };
                }
            })
    }
    
}

 

upload.js

//레이어팝업 닫기 클릭~
import RestApi from "./restapi.js";

export default class Upload{

    constructor( $form ){
        this.form=$form;
        this.fileDatas = [];
        this.formData=new FormData( $form.get()[0] );
        //현재 진행 중인 파일명~
        this.currentFileNames = '';
    }
    setFileName(name) {
        this.currentFileNames=name;
    }
    getFileName(){
        return this.currentFileNames;
    }
    getFileData() {
        return this.fileDatas;
    }

    resetFileData() {
        if (this.fileDatas.length > 0) {
            for( var i=0;i<this.fileDatas.length;i++){
                delete this.fileDatas[i];
            }
            this.fileDatas=[];
        }else{
            this.fileDatas=[];
        }
    }

    setFileData( data ) {
        for( var i=0;i<data.length;i++){
            this.fileDatas.push( data[i] );
        }
    }
    getFormData(){
        return this.formData;
    }
    //........................기타 코드 중략...................................

    //파일 전송.
    submit( func ){

        for( var i=0;i<this.getFileData().length;i++){
            //파일데이터를 FormData객체에 담아두면 ~ axios로 같이 전송시킨다.
            this.formData.append('category',  this.getFileData()[i] );
        }
       
       
        //전달되는 매개변수의 files 개수가 아닌 formData에 추가되는 최종 개수를 체크( getAll )해야 한다.
        var fileList=this.getFormData().getAll('category');
        this.setFileName( this.updateFileNames( fileList ) )

        //폼 전송 코드 여기에~
        RestApi.upload( this.getFormData(),  $('.tooltip-upload'), $('.progress-bar') )
            .then(function (res) {
                // console.log('업로딩완료=', res.data);
                var data=res.data;
                func.call(null);
                //
                this.clear();

            }.bind(this)).catch(function(error){
            console.log( error );
            if (error.response.status !== undefined) {
                ErrorInterceptor( error.response.status );
            }
        });
    }


    clear(){
        this.formData.delete('category');
        this.formData.delete('category_id');
        this.formData.delete('category_displayname');
        this.setFileName('');
        this.resetFileData();
    }

}

 

list.js ( html 에 직접 선언되는 파일 )

import RestApi from './restapi.js';
import Upload from './upload.js';

let uploadContainer=$('.upload-file-list');
let fileForm=uploadContainer.find('.dropfile-form');
let fileInput=$('.input-file');
let upload=new Upload( fileForm );

//upload  완료시 보여주는 코멘트
let uploadComplete=()=>{
   // ......................완료시 코멘트를 남기는 모션 스크립트 중략 ......................
}

//파일들이 input에 입력 되었을때
fileInput.on('change', function(e) {
    if( e.target.files.length !==0){
        //uploadContainer는 업로드시 파일리스트가 추가되는 컨테이너( 제이쿼리 셀렉터 )
        upload.updateList( uploadContainer, e.target.files );
    }
});

//폼 전송.
fileForm.on('submit', function(e) {
    e.preventDefault();
    //..............코드 중략.....................
    //업로드 전송.
    upload.submit( uploadComplete )
});

 

 

download

- 여기 나중에 작성......