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>
Reference
この問題について(Menu4.vue_20211221), 我々は、より多くの情報をここで見つけました https://velog.io/@gegus1220/Menu4.vue20211221テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol