vue图片上传及多个图片展示回显

//图片回显预览
<el-image
v-for="(item,index) in urlList"  //此处循环你的图片路径数组
:key="index" 
:src="item"   
:preview-src-list="urlList"   //此处为预览,点击图片放大展示.需要放置数组,预览可以左右切换图片
></el-image>//图片上传

//图片上传
<el-upload size="small" list-type="picture-card" :action="uploadApi"   //此处为后台上传接口 :header="header" :show-file-list="true" :file-list="imageUrls"  //此处放置图片路径数组 :on-remove="handleImgRemove"   //上传方法 :on-success="handleImgSuccess"  //移除方法
>
<i class="el-icon-plus"></i>
</el-upload>

<script>
data(){
　　return{

　　　　　　uploadApi: process.env.BASE_API + "/upload",  //上传接口  返回图片路径

      　　header: { token: store.getters.token },//头信息

      　　imageUrls: [],//存放图片路径的数组

}
}
method{

　　//图片上传

    handleImgSuccess(res, file) { //res 为调用上传接口返回的图片路径  file为选择的文件

      this.images.push(file.uid);  将文件id存入数组,后续用于移除图片

      this.imageUrls.push({  将图片名称和文件路径存入数据,后续可以用于将图片路径存入数据库

        name: file.name,

        url: res.data

      });

    },

    //图片移除

    handleImgRemove(file, fileList) {

　　　　　　this.imageUrls = this.imageUrls.filter( item =>{    //将要删除的当前图片的url与图片数组进行过滤筛选

        return item.url!= file.url

      });

    },

}
</script>