Upload1.vue_20211221

'file'은 v-model 못씀
그래서 @change로

<template>
    <div>
        <h5>upload1 예제</h5>
        <input type="text" v-model="userid" placeholder="아이디" />
        <hr />
        <img :src="imgsrc" style="width:100px" />
        <!-- 상태변수를 위쪽에 쓰고 싶으면 앞에 ':'를 붙인다 -->

        <input type="file" @change="handleImage" /> 
        <!-- file은 v-model 못씀 그래서 첨부되는 시점(change)에 메소드 호출, 읽어서 저장 -->
        
        <input type="submit" value="이미지업로드" />
    </div>
</template>

<script>
    // npm i axios --save
    import axios from 'axios';

    export default {
        // 상태변수(state)
        data() {
            return {
                userid:  '',
                userimg: '',
                imgsrc: require('../assets/img/default.png')
            }
        },

        // 메소드(함수)
        methods: {
            handleImage(e){
                console.log("Upload.vue => handleImage", e);
                this.userimg = e.target.files[0];
                // file은 v-model 못씀 그래서 첨부되는 시점(change)에 메소드 호출, 읽어서 저장

                let self = this;
                if(e.target.files[0]) {
                    // 파일 읽는 라이브러리
                    const reader = new FileReader();

                    // 파일 읽기가 완료되는 시점
                    reader.addEventListener('load', function(e1){
                        // 완료되는 시점!!!!!!!!!!!!!!!
                        self.imgsrc = e1.target.result;
                        // 지금 reader 안에서는 this 못 씀. 그래서 35줄에 this를 self로 변수지정함
                    });

                    // 파일 읽기 시작
                    reader.readAsDataURL(e.target.files[0]);    
                }
                else {
                    self.imgsrc = require('../assets/img/default.png');
                }
            },

            async handleSend() {
                const url = "백엔드의 주소로 이미지 첨부";
                const headers = {"Content-Type":"multipart/form-data"};
                
                // 보내는 데이터
                const body = new FormData();
                body.append("uid", this.userid);   // 아이디 정보
                body.append("img", this.userimg);  // 이미지 정보

                // 파일 첨부할 땐 post 
                const response = await axios.post(url, body, {headers:headers});
                console.log(response);

                // 템플릿 내 데이터 -> 상태 변수 -> 메소드 -> 백엔드
            }
        },
    }
</script>

<style scoped>

</style>