Spring-boot(mysql-mybatis-aws s3(cloudFront) + Vue.js 를 활용한 파일 업로드 하기

https://loy124.tistory.com/204 (s3 서버 구축하기)

https://loy124.tistory.com/205?category=768865 (s3 CloudFront와 연동하기)

vue.js script 방식을 활용해서 간단하게 file upload를 테스트해보았다.

<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
    <link rel="stylesheet" href="./css/layout.css">
    <!-- import CSS -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- import JavaScript -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>

<body>

    <div id="app">


        <div class="container">
            <div class="large-12 medium-12 small-12 cell">
                <label>File
                    <input v-model="title">
                    <input type="file" id="files" ref="files" v-on:change="handleFileUpload()" multiple />
                </label>
                <button v-on:click="submitFile()">Submit</button>
            </div>

            <div>
                이미지 리스트 받아오기
                <div v-for="(galleryData, index) in galleryDatas" :key="index">
                    {{galleryData.title}}
                    <img style="width: 120px;" :src="galleryData.file_path">
                </div>
            </div>
        </div>

    </div>

    <script>
        const app = new Vue({
            el: "#app",
            data() {
                return {
                    title: "",
                    files: [],
                    galleryDatas: []
                }
            },
            mounted() {
                axios.get('http://localhost:8081/api/gallery/getImageList')
                    .then(res => {
                        console.log(res.data);
                        this.galleryDatas = res.data
                    })
                    .catch(error => console.log(error));
            },
            methods: {

                submitFile() {
                    for (i = 0; i < this.files.length; i++) {
                        let formData = new FormData();
                        formData.append('title', this.title);
                        formData.append('files', this.files[i]);
                        axios.post('http://localhost:8081/api/gallery/upload',
                                formData, {
                                    headers: {
                                        'Content-Type': 'multipart/form-data'
                                    }
                                }
                            ).then(function() {
                                console.log('SUCCESS!!');
                            })
                            .catch(function() {
                                console.log('FAILURE!!');
                            });
                    }
                },

                handleFileUpload() {
                    this.files = this.$refs.files.files;
                    console.log(this.files);
                }
            }
        });
    </script>
</body>

</html>