ItemInsertBatch.vue

<template>
    <div>
        <el-card shadow="always">
            <h4>물품일괄등록</h4>
            <el-button class="button1" @click="handlePlus()">항목추가</el-button>
            <el-button class="button3" style="margin-left:-2px" @click="handleMinus()">항목삭제</el-button>
            <el-button class="button3" style="margin-left:-2px" @click="handleInsertBatch()">일괄추가</el-button>
            <el-button class="button2" style="margin-left:-2px; padding-bottom:10px;">목록으로</el-button>
            <br />

            <el-table :data="items" style="width: 100%; margin-top:20px;" size="mini">

                <el-table-column label="" width="50">
                    <template #default="scope">
                        {{scope.$index}}
                        <input type="checkbox" v-model="items[scope.$index].chk1"/>
                    </template>      
                </el-table-column>              

                <el-table-column  label="번호" width="80">
                    <template #default="scope">
                        {{ scope.$index + 1 }}
                    </template>      
                </el-table-column>              

                <el-table-column label="물품명" width="80">
                    <template #default="scope">
                        <el-input type="text" v-model="items[scope.$index].name"></el-input>
                    </template>      
                </el-table-column>              

                <el-table-column label="물품내용" width="400">
                    <template #default="scope">
                        <el-input type="textarea" v-model="items[scope.$index].content"></el-input>
                    </template>      
                </el-table-column> 

                <el-table-column label="가격" width="80">
                    <template #default="scope">
                        <el-input type="text" v-model="items[scope.$index].price"></el-input>
                    </template>      
                </el-table-column>

                <el-table-column label="수량" width="80">
                    <template #default="scope">
                        <el-input type="text" v-model="items[scope.$index].quantity"></el-input>
                    </template>      
                </el-table-column>

                <el-table-column label="이미지" width="500">
                    <template #default="scope">
                        <img :src="items[scope.$index].imageurl" style="width:100px;" />
                        <input type="file" @change="handleImage($event, scope.$index)" />
                        <button @click="handleRemoveImage()"> 초기화 </button>
                    </template>      
                </el-table-column> 
            </el-table>
        </el-card>
    </div>
</template>

<script>
    export default {
        data(){
            return {
                items: [
                    { name: 'a', content: '1', price: 10, quantity: 100, image: '', imageurl: require('../assets/imgs/default.png') },
                    { name: 'b', content: '1', price: 20, quantity: 200, image: '', imageurl: require('../assets/imgs/default.png') },
                    { name: 'c', content: '1', price: 30, quantity: 300, image: '', imageurl: require('../assets/imgs/default.png') },
                ],

            }
        },
        methods: {
            async handleInsertBatch() {
                console.log("ItemInsertBatch.vue => handleInsertBatch");

                const url = `/item/insertbatch`;
                const headers = { "Content-Type":"multipart/form-data" };
                const body = new FormData();

                for(let i=0; i < this.items.length; i++) {
                    body.append("name"     , this.items[i].name);
                    body.append("content"  , this.items[i].content);
                    body.append("price"    , this.items[i].price);
                    body.append("quantity" , this.items[i].quantity);
                    body.append("file"     , this.items[i].image);
                }
                const response = await this.axios.post(url, body, { headers: headers });

                if(response.data.status === 200) {
                    alert( '일괄 추가 되었습니다.' );
                    this.$router.push({ name: 'Seller' });
                }
            },

            handlePlus() {
                console.log("ItemInsertBatch.vue => handlePlus");

                this.items.push({ name: '', content: '', price:'', quantity:'', image: '', imageurl: require('../assets/imgs/default.png') });
            },

            handleMinus() {
                console.log("ItemInsertBatch.vue => handleMinus");

                this.items.pop();
            },

            handleImage(e, idx) {
                console.log("ItemInsertBatch.vue => handleImage");
                console.log(e, idx);
                this.items[idx].image    = e.target.files[0];
                this.items[idx].imageurl = URL.createObjectURL( e.target.files[0] );
            },

            handleRemoveImage(e, idx) {
                console.log("ItemInsertBatch.vue => handleRemoveImage");

                console.log(e, idx);

                // this.items[idx].image = null;
            },


        }   
    }
</script>

<style scoped>

</style>