一、效果

點選加號圖片就上傳，九張圖之後就隱藏加號圖片，不能添加了。

點選圖片進行預覽刪除：

二、準備工作

1、這裡上傳圖片使用了vant 的 Uploader 圖片上傳，使用很簡單。
2、預覽刪除是使用一個彈窗的子元件實現的，比較簡單，頁面就不記錄了。彈窗點選刪除之後，直接emit資訊給父元件。

三、程式碼部分

1.HTML

 <div class="dynamic-imgs ">
            <p class="img-title">上傳圖片</p>
            <div class="table-list">
				//顯示圖片
 

                <div v-for="(img,index) in dynamicPics">
                    <img class="img-add" :src="img" @click="clickImg(img,index)"/>
                </div>
                //這裡就是那個加號圖片，isAddImg控制是否顯示，上傳圖片用van-uploader
                <div v-show="isAddImg">
                    <
 
van-uploader :after-read="onRead" accept="image/*" multiple>
                        <img class="img-add" src="/static/images/addpic.png"/>
                    </van-uploader>
                </div>
            </div>
            //彈窗
            <dialog-view-img :isShow="isSelectImg"
 
 :imgInfo="viewImg" @showTag="previewImg"></dialog-view-img>

 </div>

2、js

data中先定義資料

 data() {
            return {
                dynamicPics: [],     //存放新增圖片
                isSelectImg: false,  //開啟彈窗標誌
                viewImg: {},         //放置預覽圖片資訊
            }
 },

計算dynamicPics的圖片張數是否到了9張，需要限制幾張就寫成幾，這裡是限制9張。

 computed: {
            isAddImg() {
            	//如果已經9張了，isAddImg為false，隱藏加號
                if (this.dynamicPics.length >= 9) {
                    return false;
                } else {
                    return true;
                }
            },
},

各類方法：

 methods: {
			onRead(file) {
                //新增圖片
                this.dynamicPics.push(file.content);
            },
			//點選圖片事件
            clickImg(url, index) {
                console.log(url, index);
				//獲得圖片的url和index，傳給彈窗
                this.viewImg = {
                    url: url,
                    index: index,
                };
				//開啟彈窗
                this.isSelectImg = true;

            },

            //預覽圖片返回
            previewImg(value) {
				//關閉彈窗
                this.isSelectImg = false;
				//點選刪除時，返回圖片在陣列中的index
                if (value !== null) {
                    console.log('刪除圖片', value.index);
                    this.dynamicPics.splice(value.index, 1);
                }
            },

}

四、總結