首页 > 代码库 > VUE2.0+VUE-Router做一个图片上传预览的组件

VUE2.0+VUE-Router做一个图片上传预览的组件

之前发了一篇关于自己看待前端组件化的文章,但是由于学习和实践的业务逻辑差异,所以自己练习的一些demo逻辑比较简单,打算用vue重构现在公司做的项目,所以在一些小的功能页面上使用vue来做的,现在写的这个是项目中用户反馈功能而来的,收获还是挺多的。

 

收获:dom操作=>数据操作       router的使用       组件的使用,具体总结放在尾部。

  • 功能:1.上传图片
  •   2.显示缩略图
  •   3.可以删除
  •         4.可以重新选择文件

先上成品图(主要抽取图片这块),自己在家主要做的功能,样式就不计较了。

技术分享

 

 先上文件目录

技术分享

由于测试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会由于闭包取到pushImg的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的思维转变为操纵数据。

VUE2.0+VUE-Router做一个图片上传预览的组件