VUE+ElementUI 實現圖片上傳展現以及下載

這篇文主要是針對圖片的上傳、展現以及下載，在瀏覽ElementUI文檔的時候，本打算使用文件上傳來實現這一功能，但最終仍是以爲使用比較原生的方式 input/a 標籤來實現上傳和下載，話很少說，進入正題

---

第一步：上傳

這裏我採用了input標籤的file屬性來實現上傳，accept屬性表示能夠接收的文件格式，同時綁定了change事件（做爲文件改變以後的回調 - 處理onload事件）

▲不少人會以爲原生input出來的樣式會很是醜，這裏我作一個簡單的樣式（原理是將原本的input隱藏，然年用另外的div去覆蓋在上面）

實現效果以下

是否是比原生input好看許多了

接下來咱們繼續看看文件上傳的一個onload事件的處理

• changeImega()做爲input的一個change事件，接收一個事件對象做爲參數
• 首先獲取這個事件對象的files屬性賦給fileName，fileName是用來顯示咱們要上傳的文件名，也就是上傳旁邊的字符串
• 建立一個FileReader對象，而後調用它的readAsDataURL能夠將咱們的圖片路徑轉化爲bast64，具體這個方法是這樣的，你們能夠去search一下
• 因爲onload是一個異步函數，因此若是咱們想將裏面的值傳給咱們的全局變量，咱們須要把它封裝成Promise，event.target.result返回的就是咱們圖片的base64（具體Promise的運用，建議你們也得search一下，應該Promise真的很重要！！）
• 這裏變量Image就是咱們要傳給接口得參數了

第二步，圖片得展現與下載

這裏上傳的數據庫的我就很少說明，畢竟每一個人的接口都不同，這裏我須要傳的只有圖片路徑以及圖片名

接下來，咱們能夠直接應用ElementUI庫裏的圖片組件

（註明：ImageList就是我要展現的圖片數組對象，包含了Image - 圖片路徑、name - 圖片名）

▲注意這裏的a標籤，就是用來讓咱們實現下載功能的，href綁定了咱們圖片的base64，而download綁定了咱們的圖片文件名，這裏可能有人不清除download屬性，它決定的就是咱們下載文件時的文件命名

最終效果（其中我多加了分割線以及其餘一些簡單的css）

當咱們點擊了圖片的時候，就能夠直接下載到本地了

---

總的來講仍是相對簡單，經過base64來實現，由於ElementUI上的上傳組件並非轉化成base64，因此這也是我選擇這樣的方法實現功能的緣由之一。 對於頁面樣式的修改，我這裏也沒有過多的實現，小夥伴們若是喜歡，能夠根據本身的喜愛優化頁面！

---