HTML:
<el-upload
ref="upload"
:action="imgurl"
list-type="picture-card"
:on-change="onlunch"
:file-list="contfileList"
:on-remove="handleRemove"
:on-success="handlelunSuccess"
:show-file-list="true"
:class="{hide:hideUpload}"
style="width:636px;"
>
<i class="el-icon-plus" v-if="Lunboimage.length<6"></i>
</el-upload>
js
//轮播图 图片成功回调
handlelunSuccess(res, file){
this.contfileList=file;//图片回显 照片墙
this.Lunboimage.push(file.response.data.files[0]);//轮播图数组
},
//移除轮播图的图片
handleRemove(file, fileList) {
this.Lunboimage=[];
this.contfileList=fileList;//图片回显 照片墙
if(fileList.length!=0){
for(let i=0; i<fileList.length;i++){
var iu=fileList[i].url.replace(pub._url,"");
this.Lunboimage.push(iu);
}
}else{
for(let i=0; i<fileList.length;i++){
var iu=fileList[i].response.data.files[0].replace(pub._url,"");
//照片墙的内容是由网址和具体信息拼接成的,需要去除原有拼接的url
this.Lunboimage.push(iu);
}
}
this.onlunch()
},
//判断上传得图片得长度
//轮播图上传内容的改变
onlunch(file,filelist){
this.hideUpload = this.Lunboimage.length >= this.limitCount;//控制上传接口是否出现
},
//已上传过的,再次回显
for(var i=0;i<_this.Lunboimage.length;i++){
var file={};
file.url=pub._url + _this.Lunboimage[i];
_this.contfileList.push(file)
}
element-ui 照片墙回显问题即提交后台
最新推荐文章于 2024-01-30 08:56:39 发布