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

Posted 2020-09-26 游龙翔隼

通过一个图片上传功能的开发来了解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的思维转变为操纵数据。这点可能需要我们的抽象能力，将需要操作的对象封装成结构合理的数据。