vue作一個圖片上傳預覽的組件，附vue-router基礎用法

   

　　  7-4更新  => 已將本次項目上傳至　githulb/lonhon    歡迎你們下載，之後作的新東西也都會更新在上面。

 

以前發了一篇關於本身看待前端組件化的文章，可是因爲學習和實踐的業務邏輯差別，因此本身練習的一些demo邏輯比較簡單，打算用vue重構如今公司作的項目，因此在一些小的功能頁面上使用vue來作的，如今寫的這個是項目中用戶反饋功能而來的，收穫仍是挺多的。

 

收穫：dom操做=>數據操做       router的使用       組件的使用，具體總結放在尾部。

• 功能：1.上傳圖片
• 　　2.顯示縮略圖
• 　　3.能夠刪除
  

先上成品圖（主要抽取圖片這塊），本身在家主要作的功能，樣式就不計較了。

 

 先上文件目錄

因爲測試demo，結構基本和VUE初始化生成的目錄一致，這裏把Hello文件做爲了此次組件開發的文件，App文件是主文件。這裏本身理解的vue文件：是組件，也是頁面。因此在定義的時候得根據實際狀況來作路由仍是組件。

由於產品給的圖上面要求有5個按鈕，意味着只能選5個文件，這裏若是用原來的思惟來作的話，就是放5個input進去，可是如今用vue來作了，確定得用v-for，否則太low了。先看看html部分

 

使用ul列表做爲input的容器，而後在li中使用v-for循環mmm對象，生成5個初始框。

img就是預覽時候須要用到的了，使用v-if根據item.data是否爲空來渲染，而src就是item.data

input就是上傳的了，在它的change事件中實現咱們的主要功能，     ps：實際業務使用中應該還要指定name，而且item.name應該是相同的，這樣提交給後臺的時候才能更好讀取。

span用於刪除item.data，

如今看看data部分：

其中的mmm數組初始有5個子對象（由於須要5個固定的選擇框），name爲本身定義，data用於存放圖片上傳後的base64，還有一個flag用於判斷是否上傳成功的。如今看看效果

OK，已經獲得了5個選擇器，樣式方面主要思路是將input設置爲行內塊級元素而後寬高100%  徹底透明，比較簡單，如今來實現預覽效果，

預覽效果主要使用的是H5新功能 fileReader 實現，

思路：在input指定change事件觸發pushImg方法，接受兩個參數，一個是event，一個index

在v-for循環渲染li的時候，使用的是v-for="(item,index) in mmm" ，其中item就是mmm數組的元素，index就是元素的下標，這裏具體能夠看官方的文檔

如今來看pushImg方法：

在pushImg內部let了4個變量

　　mm指向data中的mmm，由於須要在reader.onload中用到，若是直接this.mmm會因爲閉包取到reader.onloadg的this

　　flag用於標記上傳成功，由於要作一個上傳成功的提示

　　flie指向input

　　reader就是咱們預覽圖片須要用到的了，這是一個H5的新接口，具體的使用手冊點擊 這裏

在reader.onload中，咱們將讀取到的result也就是圖片的base64碼放入mmm[i].data

還設置了個定時器改變flag的值，實現成功提示的效果

ps：reader.onload是一個異步操做，因此result要麼在它內部傳出去，要麼用回調或者promise傳出去。

如今上傳一個圖片看看效果

 

已經ok，如今來作最後一步——刪除圖片

span中已經指定了click事件爲delImg，來看看代碼：

主要作的就是清空所點擊的選擇器的文件了

 

如今來一遍完整的流程：

 

小功告成，接下來講說使用vue-router把這個頁面路由到其它頁面中，要使用首先要安裝這個模塊，在項目目錄下使用cnpm install vue-router就行

仍是先說下大體步驟：

　　1.製做頁面（這點上面已經作好了，就是咱們的Hello文件）

　　2.配置路由

　　3.在頁面中展現

直接來第2步，若是瞭解實體路由器的應該知道路由器中都有一個路由表，這裏我創建了一個route.js，就相似於路由器中的路由表。

在route.js中，引入Vue、vue-router、和須要路由的組件Hello，圖中的 

import Hello from '@/components/Hello'　　這裏@至關於我配置的一個src目錄的縮寫而已，若是不會不用管，按照正常路徑寫就行。

下圖中的path就是一個路徑，在後面要用到，name至關於一個別名，component就是對應組件了。

 

按照上圖，咱們就建立了一個路由表，創建好以後咱們須要在主入口把路由表掛載上去。這裏項目的主入口main.js，
進入main.js，這裏就引入上面配置好的路由表route.js，和程序的主模塊App，能夠看到咱們的Vue實例是掛載到App中的。

 

接下來在App.vue中展現了，因爲是靜態路由，因此主要配置template模塊，繼續上配置圖

圖中圈出來的第一部分，就相似於咱們的a標籤，只不過vue-router使用router-link標籤封裝了，值得一提的是，router-link標籤只是起到一個包裹的做用，並無實際的html意義，裏面能夠放各類內容。

第二部分就是咱們要展現的舞臺了，<router-view></router-view> 就是咱們的路由的模塊須要映射的地方，如今來測試一下是否成功。

注意咱們的地址欄的變化，從localhost：8080變成了localhost：8080/#/hhh，也就是說此次路由跳轉成功。

如今來作組件引入到頁面中

將Hello做爲組件放在App中，其實只要其它頁面引用了該組件，就可使用，並不侷限於App。

咱們先在App.vue文件中的script部分將Hello引入，並註冊該組件

 

接下來在template部分將組件放進去，咱們來把他放在頂部。

如今來看看效果，如圖頁面中已經渲染出了該模塊

 

如今咱們來看看router和做爲模塊引入的結合效果。

如今能看到組件部分和路由進去的部分都可以正常運行，至此咱們的功能就算所有完成了。


總結： 數據驅動的魔力實在太大，就拿圖片上傳來講，咱們在實際操做中其實只是對data中的mmm進行了賦值操做，而後將值綁定在dom節點上，經過雙向綁定就實現了對DOM的操做，特別是如今的網站項目中，大部分都是處理數據，好比電商之類的網站。其實在用VUE作這個上傳功能以前我已經用傳統的jQuery寫出了這個插件，從手段上來講，jQuery作的就是操縱DOM節點，設置各個DOM節點的ID，而後js再經過ID取到對應的節點，給DOM綁上事件或者取出DOM的值，須要寫大量的html代碼和js代碼；在VUE中，使用一個v-for就能夠渲染出多個想要的內容。從複用性來講，咱們此次作的這個上傳圖片功能就已是一個組件了，咱們不只僅能夠在App.vue中使用它。像此次的Hello，咱們不只可使用路由把它做爲一個新的頁面，也可使用component把他做爲組件，也就是說，只要業務須要，咱們能夠選擇合理的方式複用咱們已經寫好的東西。

　　特別須要注意的就是，使用angular或者vue這種數據驅動視圖的框架，咱們須要將原來的操縱DOM的思惟轉變爲操縱數據。這點可能須要咱們的抽象能力，將須要操做的對象封裝成結構合理的數據。