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的思惟转变为操纵数据。这点可能须要咱们的抽象能力，将须要操做的对象封装成结构合理的数据。