摘要：在逛b站時看到一個上傳圖片的效果，想着能夠本身也作一個，由於原做者是用原生js寫的，那我不如就用vue寫好了，固然，是一個很小的東西，在HTML文件直接引用vue就行了，詳細步驟以下~
本文分享自華爲雲社區《vue實現上傳圖片並預覽效果》，原文做者：北極光之夜。 。css
一.話很少，先看效果： 
你們好，(๑╹◡╹)ﾉ」 這是我在逛b站時看到一個上傳圖片的效果，想着能夠本身也作一個，由於原做者是用原生js寫的，那我不如就用vue寫好了，固然，是一個很小的東西，在HTML文件直接引用vue就行了，詳細步驟以下~vue
二.詳細實現步驟：
1.先定義基本標籤：
先無論標籤裏面的vue指令，先定義基本HTML標籤。git
<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樣式：
此爲全局與底層盒子樣式。npm
*{
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； 圖片保持原有比例，不拉伸。app
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數組會存放每張圖的地址。flex
<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/