vue

 

 

 

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue3</title>
    <script src="https://unpkg.com/vue@next"></script>
    
</head>
<body>
<!-- json 데이터 샘플 -->
<a href="https://jsonplaceholder.typicode.com/" target="_blank">json 데이터 샘플</a><br><br>

    <div id="app">
        <input type="file" @change="onFileChange">
        <p>읽어 들인 데이터 
            {{loadData}}
        </p>
    </div>

<script>
    const JsonFileUpload = {
        data() {
            return {
                loadData:''
            }
        },

        methods: {
            onFileChange(e){
                const file =e.target.files[0];
                if(file){
                    console.log(file);
                    const reader =new FileReader();
                    const thisParent=this;
                    reader.onload=function(e){
                        const jsonToArray=JSON.parse(e.target.result);
                        thisParent.loadData=jsonToArray;
                    },
                    reader.readAsText(file);
                }
            }
        },
    }
    Vue.createApp(JsonFileUpload).mount('#app');    
</script>

</body>
</html>

 

 

about author

PHRASE

Level 60  라이트

제 눈에 안경이다 , 보잘것없는 것도 마음에 들면 좋아 보인다는 말.

댓글 ( 0)

댓글 남기기

작성












vue 목록    more