<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 方法 ，暂不支持其他参数，所以为了获取列表的index，可以通过以上方法，在el-upload外层套一个p获取index， 然后再在 getImageSuccess 方法内根据 index 对数据操作。
下载本文