이 글은 v-for에서 elementui와 el-upload를 사용할 때 index를 얻는 방법을 주로 소개합니다. 이제 필요한 친구들이 참고할 수 있도록 공유하겠습니다.
<div v-for = 'item in list'> <div @click="getImageTypeIndex(index)"> <el-upload class="upload-demo" drag :action="uploadUrl" :headers = "{token : userToken}" //带用户token :on-success="getImageSuccess" //上传成功 :before-upload="beforeAvatarUpload" :show-file-list = "false" :on-error = "getImageError" > //若上传失败,可继续拖拽 <div v-show="!item.imageUrl"> <i class="el-icon-upload"></i> <p class="c8492A6 f14 upload-p">点击或拖拽 上传<span class="cFF8400">图片</span></p> <p class="c8492A6 f12 upload-p">只能上传 jpg/png 文件,且不超过500kb</p> </div> //若上传成功,展示图片 <img v-show="item.imageUrl" :src="imgUrl + '?fileId=' + item.imageUrl + '&token=' + userToken" alt="" height="180"> </el-upload> </div> </div>
// 获取当前index getImageTypeIndex:function (index) {this.uploadImageType = index //先在data里定义下,此处省略定义}, // 图片上传成功 getImageSuccess:function (res, file) { this.$message({ message: '上传成功!', type: 'success' }); this.list[this.uploadImageIndex].imageUrl = res.data.fileId //我这里是list里有 imageUrl 来存储图片id,展示的地方根据id自己拼url },
참고: el-upload의 getImageSuccess 메소드는 현재 다른 매개변수를 지원하지 않습니다. 따라서 목록의 색인을 얻으려면 위의 메소드를 사용하여 목록의 외부 레이어에 p를 배치하여 색인을 얻을 수 있습니다. el-upload를 수행한 다음 위의 방법에 따라 getImageSuccess 메서드를 사용하여 데이터에 대해 작업합니다.
위 내용은 모두의 학습에 도움이 되기를 바랍니다. 더 많은 관련 내용은 PHP 중국어 홈페이지를 주목해주세요!
관련 권장 사항:
jQuery와 캔버스를 통해 구현된 구형 평면 던지기 및 색상 동적 변환 효과
JSON 형식 데이터를 기반으로 하는 간단한 jQuery 슬라이드쇼 플러그인(jquery-slider) 소개
위 내용은 v-for에서 elementui와 el-upload를 사용할 때 인덱스를 얻는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!