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>