是一個圖片上傳的功能需求，當用戶選擇本地待上傳的圖片后隱藏上傳組件并本地預覽圖片略縮圖。這是個非常簡單的功能且是前端使用頻率很高的功能，ElementUI為了方便用戶封裝了一套文件上傳的組件el-upload。可以幫助用戶簡單、快捷的實現文件上傳功能，同時還提供了豐富的屬性來實現對文件的各種操作。

HTML構建

這里我們利用ElementUI提供的組件el-upload來實現圖片上傳的功能，ElementUI封裝了很多屬性可以幫助我們快速的實現文件的上傳，監聽、校驗和設限。這里我們不用el-upload的自動上傳功能，所以我們利用屬性:auto-upload="false"來禁止文件自動上傳。屬性on-change可以監聽文件添加、上傳時的狀態改變，利用該屬性觸發自定義事件可以獲取到需要的文件屬性。

CSS樣式設計

圖片上傳的樣式根據設計需求來就可以了，我這里利用flex定義簡單的樣式。圖片預覽我們直接借用el-upload標簽屬性，設置其背景圖片為我們上傳的圖片即可。

獲取圖片URL地址

on-change屬性在文件狀態改變時的鉤子，添加文件、上傳成功和上傳失敗時都會被調用，利用on-change屬性綁定自定義觸發事件來生成可用于本地預覽的URL地址。e.raw為圖片的實體對象，利用window.createObjectURL(e.raw)來創建圖片地址。

阻止自動上傳并獲取圖片

在el-upload中定義屬性:auto-upload="false" 可以禁止文件自動上傳，上傳禁用之后無法通過上傳之后的效果顯示。此時before-upload、on-progress、on-success、on-error、on-preview、on-remove等鉤子函數就無法獲取到文件信息了，所以想獲取到文件的還需要通過on-change屬性來實現。既然禁止了自動上傳那么我們就需要拿到文件對象，我們需要在data中創建一個 FormData 對象來接收文件數據（有文件的form表單上傳數據要用formData類型）。

手動上傳圖片

獲取到文件數據之后我們就可以開始手動上傳文件，如果還需要附上表單數據我們可以通過append繼續向formData中添加數據。formData可以將form表單元素的name與value進行組合，實現表單數據的序列化從而減少表單元素的拼接，提高工作效率。

總結：

在form表單中如果要上傳文件，一定要將headers參數 Content-Type=”multipart/form-data”設置封裝數據類型。把數據分成一個一個小段，再利用ajax的send()方法將數據發送至后臺。以上內容是小編給大家分享的【Vue實戰082：el-upload組件實現圖片上傳及預覽】，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。更多Vue實戰技巧可以參考以下專欄：將headers設置成'Content-Type':'multipart/form-data'類型。

們或多或少都使用過各式各樣的富文本編輯器，其中有一個很方便功能，復制一張圖片然后粘貼進文本框，這張圖片就被上傳了，那么這個方便的功能是如何實現的呢？

原理分析：

復制=>粘貼=>上傳

在這個操作過程中，我們需要做的就是：監聽粘貼事件=>獲取剪貼板里的內容=>發請求上傳

需要明白的是：

我們只能上傳截圖工具截的圖片(qq截圖、微信截圖等)，不能粘貼上傳系統里的圖片(從桌面上、硬盤里復制)，因為他們是存在完全不同的地方。

知悉paste event這個事件：當進行粘貼（右鍵paste/ctrl+v）操作時，該動作將觸發名為'paste'的剪貼板事件，這個事件的觸發是在剪貼板里的數據插入到目標元素之前。如果目標元素（光標所在位置）是可編輯的元素（設置了contenteditable屬性的div。textarea并不行），粘貼動作將把剪貼板里的數據，以最合適的格式，插入到目標元素里；如果目標元素不可編輯，則不會插入數據，但依然觸發paste event。數據在粘貼的過程中是只讀的。

監聽了paste事件，也知道了表現形式，接下來就是如何獲取數據了：

chrome有特定的方法，利用clipboardData.items、getAsFile()、new FileReader()等api可以在paste回調函數里獲取到剪貼板里圖片的base64編碼字符串（無論是截圖粘貼的還是網頁圖片復制粘貼的），ie11，firefox沒有這樣的api，不過依然有辦法可以獲取，因為數據已經表現在img的src里了，對于截圖粘貼的，直接取img的src屬性值（base64），對于網頁粘貼的，則把地址傳給后臺，然后根據地址down下來，存在自己的服務器，最后把新地址返回來交給前端展示就ok了。為了保持一致性便于管理，統一將所有情況（截圖、網頁）中的img的src屬性替換為自己存儲的地址。

完整例子：

function fChange() { 
 let file = document.getElementById('file'); 
 // 輸出已經選擇圖片名字 
 console.log(file.value); 
 // 輸出已經選擇的圖片對象 
 console.log(file.files[0]); 
} 
... 
<input type="file" id="file" onchange="fChange()">

// file 轉 blob對象 
let bold = window.URL.createObjectURL(file.files[0]); 
console.log('bold==>'+bold); 
 
let boldImg = document.getElementById('bold'); 
boldImg.src = bold; 
 
// file 轉 base64 
let base64Img = document.getElementById('base64'); 
var reader = new FileReader(); 
reader.readAsDataURL(file.files[0]); 
reader.onload = function (e) { 
 console.log('base64==>'+this.result); 
 base64Img.src = this.result; 
}

<div id="img-pre"> 
</div> 
<div id="add-pic"> 
 <input type="file" id="up-file" onchange="fChange()"> 
</div>

#add-pic{ 
 width: 100px; 
 height: 100px; 
 background: url('./add-pic.png') 
} 
#add-pic input{ 
 width: 100%; 
 height: 100%; 
 display: none; 
} 
#img-pre:after{ 
 display: block; 
 content: ''; 
 clear: both; 
} 
#img-pre img{ 
 float: left; 
 width: 100px; 
 height: 100px; 
 margin-right: 10px; 
}

let addPic = document.getElementById('add-pic'), upFile = document.getElementById('up-file'); 
// 監聽圖片點擊，從而觸發input file的點擊事件 
addPic.addEventListener('click', function(){ 
 upFile.click(); 
}) 
function fChange() { 
 let file = document.getElementById('up-file'); 
 let imgPre = document.getElementById('img-pre'); 
 
 // file 轉 blob對象 
 let bold = window.URL.createObjectURL(file.files[0]); 
 
 // 創建img元素，并添加到img-pre元素里 
 var img = document.createElement("img"); 
 img.setAttribute("src", bold); 
 imgPre.appendChild(img); 
}