<div v-for="(item,index) in imagesList"
:key="index">
<el-upload class="avatar-uploader avatar-uploader-imagesUrls"
:action="logoUrl"
:show-file-list="false"
accept='image/jpeg,image/png'
:on-remove="handleRemove"
:on-success="(response, res, file) => handleImageListSuccess(response, res, file, index)"
:before-upload="beforeAvatarUpload">
<img v-if="item"
:src="item"
class="avatar">
<i v-else
class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>
</div>
<div class="upImgPlaceholder"
v-show="imagesList.length<5">
<el-button type="primary"
size="mini"
plain
@click="addMore">添加更多图片</el-button>
</div>
把:on-success=="handleImageListSuccess"改成:on-success="(response, res, file) => handleImageListSuccess(response, res, file, index)"即可传额外的参数
data(){
return {
imagesList: [""]
}
}
// 图片上传成功时回调
handleImageListSuccess (response, res, file, index) {
console.log(index);
if (response.code === 1) {
this.$message.success(response.msg)
} else {
this.$message.error(response.msg)
}
this.$set(this.imagesList, index, encodeURI(response.data));
},
// 图片格式检测
beforeAvatarUpload (file) {
const isIMAGE = ((file.type === 'image/jpeg') || (file.type === 'image/png'))
const isLt2M = file.size / 1024 / 1024 < 10;
if (!isIMAGE) {
this.$message.error(this.$t('goods.imgError.type'));
return
}
if (!isLt2M) {
this.$message.error(this.$t('goods.imgError.size'));
return
}
return isIMAGE && isLt2M;
},
// 添加更多图片
addMore () {
this.imagesList.push('');
},
注意添加图片会改变数组,所以数组设置值的时候使用this.$set(arr, index,newValue);