摘要：在逛b站時看到一個上傳圖片的效果，想着可以自己也做一個，因為原作者是用原生js寫的，那我不如就用vue寫好了，當然，是一個很小的東西，在HTML文件直接引用vue就好了，詳細步驟如下~
本文分享自華為雲社區《vue實現上傳圖片並預覽效果》，原文作者：北極光之夜。 。
一.話不多，先看效果： 
大家好，(๑╹◡╹)ﾉ” 這是我在逛b站時看到一個上傳圖片的效果，想着可以自己也做一個，因為原作者是用原生js寫的，那我不如就用vue寫好了，當然，是一個很小的東西，在HTML文件直接引用vue就好了，詳細步驟如下~
二.詳細實現步驟：
1.先定義基本標簽：
先不管標簽里面的vue指令，先定義基本HTML標簽。
<div id="app"> <div class="upload"> <input type="file" id="file" multiple @change="upload"> </div> <ul class="view"> <li> <img src="./img/52.jpg"> <div class="delect" title="刪不了我" @click="noDelect">×</div> </li> <li v-for="(item,index) in list" :key="index" > <img :src="item"> <div class="delect" @click="delect(index)">×</div> </li> </ul> </div>
.upload是上傳圖片盒子，里面有一個input類型為file的標簽；
.view是放圖片的大盒子，每個小 li 是一張圖片，默認有一張圖，還有一個小 li 是為了v-for渲染的；
delect是刪除圖片按鈕；
2.開始定義基本css樣式：
此為全局與底層盒子樣式。
*{ margin: 0; padding: 0; box-sizing: border-box; } #app{ width: 900px; background-color: rgb(241, 241, 241); margin: 50px auto; }
3. .view的樣式：
.view{ display: flex; justify-content: space-around; flex-wrap: wrap; align-items: space-around; }
display: flex; flex布局；
justify-content：space-around；主軸每個子項目間隔對齊。
flex-warp：warp；換行。
align-items：space-around：交叉軸每個子項目間隔對齊。
4. 圖片的樣式：
.view > li{ width: 200px; height: 120px; background-color: rgba(54, 194, 35,0.1); list-style: none; margin: 20px; position: relative; } .view > li > img{ width: 100%; height: 100%; object-fit: cover; }
object-fit：cover； 圖片保持原有比例，不拉伸。
5. .deldect按鈕的樣式：
.delect{ position: absolute; right: 0; top: 0; width: 20px; height: 20px; text-align: center; line-height: 20px; font-size: 15px; background-color: rgba(255, 255, 255,0.5); user-select: none; cursor: pointer; opacity: 0; } .delect:hover{ background-color: rgba(31, 31, 31, 0.5); color: white; } .view>li:hover .delect{ opacity: 1; }
user-select: none; 文本不可選中；
opacity：0； 透明度；
6.更改input標簽的樣式：
通過在input標簽外套一個div，把input標簽設為透明，然后給div設置想要的樣式。可給div設置一個雙偽類元素，填上文字與樣式。
.upload{ width: 80px; height: 20px; background-color: rgba(135, 206, 235,0.2); border: 1px dashed black; border-radius: 5px; position: relative; } .upload:hover{ background-color: rgba(135, 206, 235,1); } .upload::before{ position: absolute; top: 0; left: 0; right: 0; bottom: 0; content: '上傳圖片'; font-size: 13px; text-align: center; font-family: 'fangsong'; line-height: 20px; user-select: none; } #file{ width: 100%; height: 100%; opacity: 0; }
7.給我們的單頁面引入vue和聲明vue實例對象：
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> var app = new Vue({ el:"#app", data: {}, methods: {} }) </script>
8. 給input標簽綁定一個change事件，同時聲明一個list數組：
list數組會存放每張圖的地址。
<input type="file" id="file" multiple @change="upload">
data: {
list:[]
},
9. 定義upload方法，實現把選擇的全部圖片地址存放到list數組：
upload函數在methods：{ } 里聲明。
upload(e){ //e.target指向事件執行時鼠標所點擊區域的那個元素，那么為input的標簽， // 可以輸出 e.target.files 看看，這個files對象保存着選中的所有的圖片的信息。 console.log(e.target.files) //------------------------------------------------------ // 既然如此，循環這個files對象，用for of 循環， for(let item of e.target.files){ //正則表達式，判斷每個元素的type屬性是否為圖片形式，如圖 if (!/image\/\w+/.test(item.type)) { // 提示只能是圖片，return alert("只能選擇圖片"); return; } // 保存下當前 this ，就是vue實例 var _this = this; // 創建一個FileReader()對象，它里面有個readAsDataURL方法 let reader = new FileReader(); // readAsDataURL方法可以將上傳的圖片格式轉為base64,然后在存入到圖片路徑, //這樣就可以上傳電腦任意位置的圖片 reader.readAsDataURL(item); //文件讀取成功完成時觸發 reader.addEventListener('load',function(){ // reader.result返回文件的內容。 //只有在讀取操作完成后，此屬性才有效，返回的數據的格式取決於是使用哪種讀取方法來執行讀取操作的。 //給數組添加這個文件也就是圖片的內容 _this.list.push(this.result) }) } //------------------------------------------------------------ },
10.頁面顯示數組的每張圖片：
<li v-for="(item,index) in list" :key="index" > <img :src="item"> <div class="delect" @click="delect(index)">×</div> </li>
給小 li 綁定v-for循環，循環 list 數組，每個元素其實就是一個地址，綁定到圖片的 src 屬性上。
index是給數組的每個元素設置一個索引值。可以理解成數組下標嘛。
11. 定義刪除圖片的方法：
先給做刪除的盒子綁定一個點擊事件，同時傳入index索引值，好知道是點擊了哪張圖：
<div class="delect" @click="delect(index)">×</div>
用splice方法刪除list數組里對應的數據就好。
delect(index){ console.log(index); this.list.splice(index,1); }, // 這是默認圖片的方法，彈出默認圖片無法刪除 noDelect(){ alert('默認圖片無法刪除。') } }
三.源碼分享：
下載地址如下： https://gitee.com/aurora-in-winter/blog/tree/master/
