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，因此这也是我选择这样的方法实现功能的缘由之一。 对于页面样式的修改，我这里也没有过多的实现，小伙伴们若是喜欢，能够根据本身的喜爱优化页面！

---