Menu4.vue_20211221

<template>
    <div>
        <h4>이미지 여러개 첨부</h4>
        <el-table :data="items" size="mini" style="width: 100%;">
            <el-table-column type="index" width="50" />
            <el-table-column label="이미지">
                <template #default="scope">
                    <el-input size="mini" type="text" v-model="scope.row.itemName" />
                </template>
            </el-table-column>
            <el-table-column label="상품명">
                <template #default="scope">
                    <el-input size="mini" type="text" v-model="scope.row.id" />
                </template>
            </el-table-column>
            <el-table-column label="가격">
                <template #default="scope">
                    <el-input size="mini" type="text" v-model="scope.row.id" />
                </template>
            </el-table-column>
            <el-table-column label="판매수량">
                <template #default="scope">
                    <el-input size="mini" type="text" v-model="scope.row.id" />
                </template>
            </el-table-column>
        </el-table>
        <table>
            <thead>
                <tr>
                    <th>번호</th>
                    <th>이미지</th>
                    <th>상품명</th>
                    <th>가격</th>
                    <th>판매수량</th>
                </tr>
            </thead>

            <tbody>
                <tr v-for="(tmp, idx) in count" :key="tmp">
                    <td>{{tmp}}</td>
                    <td>
                        <input type="file" ref="file" style="display:none;"
                            @change="handleImg($event, idx)" />
                            <!-- 그냥 idx를 넣으면 e가 안감. 그래서 $event를 붙임 (59라인) -->
                        <img :src="imgsrc[idx]" @click="handleFile(idx)"
                            style="width:50px; cursor:pointer;" />
                    </td>
                    <td><input type="text" v-model="itemName[idx]" placeholder="상품명" /></td>
                    <td><input type="text" v-model="itemPrice[idx]" placeholder="가격" /></td>
                    <td><input type="text" v-model="itemQuentity[idx]" placeholder="수량" /></td>
                </tr>
            </tbody>
        </table>
        <input type="button" ref="btn1" class="button4" value="일괄등록" />
    </div>
</template>

<script>
    export default {

        created() {
            for(let i=0; i<this.count; i++){
                this.imgsrc.push( require('../../assets/img/default.png') );
            }
        },
        data() {
            return {
                // 항목 개수. 기본값: 5
                count: 3,

                // default 이미지 설정
                imgsrc: [], 

                // v-model
                itemName: [],
                itemPrice: [],
                itemQuentity: [],
            }
        },
        methods: {
            handleImg(e, idx) {
                console.log("Menu4.vue => handleImg", e, idx);

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

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

                    // 파일 읽기 시작
                    reader.readAsDataURL(e.target.files[0]);    
                }          
            },
            handleFile(idx) {
                console.log("Menu4.vue => handleFile", idx);
                console.log(this.$refs.btn1); // ref="btn1" 한 번
                console.log(this.$refs.file); // ref="file" 배열

                // this.$refs.btn1.click(); // 한 개 클릭시
                this.$refs.file[idx].click(); // idx를 이용하여 배열 [idx]
            }
        }
    }
</script>

<style scoped>

</style>