前端实现文件的上传,就必须用到input标签,type属性为file
  在vue项目中通ref操作dom。input有一个属性accept,是必须要搭配type=file使用。
  multiple可以上传多张,accept限制上传文件的类型,属性值有
  • audio(音频)
  • video(视频)
  • image(图片)
  • MIME_type(一个有效的 MIME 类型,不带参数。请参阅 IANA MIME 类型,获得标准 MIME 类型的完整列表。image/*表示接受所有类型的图片,音频,视频相同。
 <input type="file" accept="image/*" ref="file" @change="upload"  multiple/>

  监听inputonchange事件,在change事件里操作DOM,拿到上传的文件信息。上传的文件信息都会保存在files以数组元素的形式保存。

 this.$refs.file.files[0]

  通过new fileReader对象将图片转换为base64的数据,FileReader 对象允许Web应用程序异步读取存储在用户计算机上的文件的内容,

 let data = this.$refs.file.files[0];
let imgFile = new FileReader();
imgFile.readAsDataURL(data);
imgFile.onload = res => {
console.log(res);
this.src=res.target.result
};

  

  readAsDataURL,读取指定的文件内容,一旦完成,就可以在onload事件拿到base64数据。
  onload事件有一个参数,这个参数包含了读取完成之后的文件信息,其中,res.target.result就是转换之后的base64图片数据。将base64数据赋值给src即可预览图片。

  

前端实现图片上传预览并转换base64的更多相关文章

  1. js实现图片上传预览功能,使用base64编码来实现

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  2. [前端 4] 使用Js实现图片上传预览

    导读:今天做图片上传预览,刚开始的做法是,先将图片上传到Nginx,然后重新加载页面才能看到这个图片.在这个过程中,用户一直都看不到自己上传的文件是什么样子.Ps:我发现我真的有强迫症了,都告诉我说不 ...

  3. js前端实现多图图片上传预览

    <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="C ...

  4. 兼容好的JS图片上传预览代码

    转 : http://www.codefans.net/articles/1395.shtml 兼容好的JS图片上传预览代码 (谷歌,IE11) <html xmlns="http:/ ...

  5. Jquery图片上传预览效果

    uploadPreview.js jQuery.fn.extend({ uploadPreview: function (opts) { var _self = this, _this = $(thi ...

  6. Javascript之图片上传预览

    使用Javascript之图片上传预览,我们无需上传到服务器中,兼容所有浏览器. 关键方法是使用微软库filter:progid:DXImageTransform.Microsoft.AlphaIma ...

  7. HTML5 图片上传预览

    <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="utf-8& ...

  8. ASP.NET工作笔记之一:图片上传预览及无刷新上传

    转自:http://www.cnblogs.com/sibiyellow/archive/2012/04/27/jqueryformjs.html 最近项目里面涉及到无刷新上传图片的功能,其实也就是上 ...

  9. php 图片上传预览(转)

    网上找的图片上传预览: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:/ ...

随机推荐

  1. epic游戏平台如何启用认证器应用程序/二次验证码/谷歌身份验证器?

    1.登陆epic游戏平台,找到二次验证绑定界面 登陆https://www.epicgames.com/store/zh-CN/, 点右上角用户头像-[账户]. 之后点-[密码与安全] 在[双重验证] ...

  2. Golang获取目录下的文件及目录信息

    一.获取当前目录下的文件或目录信息(不包含多级子目录) func main() {  pwd,_ := os.Getwd() //获取当前目录  //获取文件或目录相关信息  fileInfoList ...

  3. Java容器学习之List

    List接口继承了Collcetion接口,Collection接口又继承了超级接口Iterable,List是有序列表,实现类有ArrayList.LinkedList.Vector.Stack等. ...

  4. org.apache.ibatis.reflection.ReflectionException: There is no getter for property named XXX 异常的解决办法。(亲测,一次成功!) #Mybatis

    今天在用Mybatis的时,写测试验证插入操作时出现错误org.apache.ibatis.reflection.ReflectionException: There is no getter for ...

  5. arcgis for js 如何用contains过滤数据

    添加全部数据 // 构建map容器 var view = new MapView({ container: 'mapId', map: map }); /******************** * ...

  6. 【JMicro】微服务开发及使用

    JMicro是一个用Java语言实现的开源微服务全家桶, 源码地址:https://github.com/mynewworldyyl/jmicro, Demo地址:http://124.70.152. ...

  7. Python Tuple(元组) tuple()方法

    描述 Python 元组 tuple() 函数将列表转换为元组.每组词 www.cgewang.com 语法 tuple()方法语法: tuple( iterable ) 参数 iterable -- ...

  8. PHP move_uploaded_file() 函数

    定义和用法 move_uploaded_file() 函数把上传的文件移动到新位置. 如果成功该函数返回 TRUE,如果失败则返回 FALSE. 语法 move_uploaded_file(file, ...

  9. PHP strrchr() 函数

    实例 搜索 "world" 在字符串中的位置,并返回从该位置到字符串结尾的所有字符: <?php高佣联盟 www.cgewang.comecho strrchr(" ...

  10. 算法图解(python2.7)高清PDF电子书

    点击获取提取码:pzhb 内容简介 本书示例丰富,图文并茂,以让人容易理解的方式阐释了算法,旨在帮助程序员在日常项目中更好地发挥算法的能量.书中的前三章将帮助你打下基础,带你学习二分查找.大O表示法. ...