详解vue更改头像功能实现


Posted in Javascript onApril 28, 2019

详解vue更改头像功能实现

详解vue更改头像功能实现

如上图所示:需要完成的功能是点击更改头像,获取本地文件库,选择图片后将原始图片替换。这里我就直接用html文件引入vue来简单实现在这功能,代码如下:

HTML:

<div id="app">
 <div class="item_bock head_p">
   <div class="head_img">
    <img :src="userInfo.avatar"/>
    <--图片地址动态绑定-->
   </div>
   <div class="setting_right" @click.stop="uploadHeadImg">
    <div class="caption">更改头像</div>
   </div>
   <input type="file" accept="image/*" @change="handleFile" class="hiddenInput"/>
  </div>
 </div>

注意:

1.accept 属性用于限制图像的格式 如:(accept=”image/gif, image/jpeg”),accept=”image/*”表示不限制格式。
2.真正打开本地文件的是input,但这里是将其隐藏的。

JS:

var app = new Vue({
 el: '#app',
 data: {
  userInfo: {
   avatar: 'https://gss0.bdstatic.com/-4o3dSag_xI4khGkpoWK1HF6hhy/baike/c0%3Dbaike92%2C5%2C5%2C92%2C30/sign=62d46c39067b020818c437b303b099b6/d4628535e5dde7119c3d076aabefce1b9c1661ba.jpg'
  }
  // 初始图片
 },
 methods: {
  // 打开图片上传
  uploadHeadImg: function () {
   this.$el.querySelector('.hiddenInput').click()
  },
  // 将头像显示
  handleFile: function (e) {
   let $target = e.target || e.srcElement
   let file = $target.files[0]
   var reader = new FileReader()
   reader.onload = (data) => {
    let res = data.target || data.srcElement
    this.userInfo.avatar = res.result
   }
   reader.readAsDataURL(file)
  },
 }
})

注意:

  1.  1.this.$el.querySelector('.hiddenInput') 是获取文档中 class=”hiddenInput” 的元素。
  2. 2.在打开文件夹选中图片确认后,执行handleFile函数
  3. 3.let $target = e.target || e.srcElement 表示调用他的各种属性,两个的区别是:ie下支持e.srcElement,ff支持e.target。
  4. 4.由于手机上可以选择多张图片,所以let file = $target.files[0],表示取第一张图。
  5. 5.var reader = new FileReader() FileReader 对象允许Web应用程序异步读取存储在用户计算机上的文件(或原始数据缓冲区)的内容,使用 File 或 Blob 对象指定要读取的文件或数据。
  6. 6.onload 事件会在页面或图像加载完成后立即发生。
  7. 7.FileReader对象的readAsDataURL方法可以将读取到的文件编码成Data URL。

css:

.item_bock {
 display: flex;
 align-items: center;
 justify-content: space-between;
 height:94px;
 width: 300px;
 padding:0px 24px 0px 38px;
 border-bottom: 1px solid #f7f7f7;
 background: #fff;
}
.head_p {
 height:132px;
}
.head_img{
 height: 90px;
}
.head_img img{
 width:90px;
 height:90px;
 border-radius:50px
}
.setting_right{
 display: flex;
 height: 37px;
 justify-content: flex-end;
 align-items: center;
}
.hiddenInput{
 display: none;
}
.caption {
 color: #8F8F8F;
 font-size: 26px;
 height: 37px;
}

这里只是将图片显示出来,并没有保存起来,如果需要上传或者保存,需要后台接口配合。

以上所述是小编给大家介绍的vue更改头像功能实现详解整合,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
JavaScript OOP面向对象介绍
Dec 02 Javascript
jquery实现弹出div,始终显示在屏幕正中间的简单实例
Mar 08 Javascript
Eclipse配置Javascript开发环境图文教程
Jan 29 Javascript
基于jQuery实现简单的折叠菜单效果
Nov 23 Javascript
实用又漂亮的BootstrapValidator表单验证插件
May 30 Javascript
jQuery progressbar通过Ajax请求实现后台进度实时功能
Oct 11 Javascript
javascript中this关键字详解
Dec 12 Javascript
使用axios实现上传图片进度条功能
Dec 21 Javascript
JavaScript实现与使用发布/订阅模式详解
Jan 19 Javascript
vue+高德地图写地图选址组件的方法
May 18 Javascript
详解一些适用于Node.js的命名约定
Dec 08 Javascript
用云开发Cloudbase实现小程序多图片内容安全监测的代码详解
Jun 07 Javascript
Vue2(三)实现子菜单展开收缩,带动画效果实现方法
Apr 28 #Javascript
js+html5 canvas实现ps钢笔抠图
Apr 28 #Javascript
判断文字超过2行添加展开按钮,未超过则不显示,溢出部分显示省略号
Apr 28 #Javascript
详解微信小程序调用支付接口支付
Apr 28 #Javascript
Vue 中文本内容超出规定行数后展开收起的处理的实现方法
Apr 28 #Javascript
使用webpack编译es6代码的方法步骤
Apr 28 #Javascript
使用异步组件优化Vue应用程序的性能
Apr 28 #Javascript
You might like
一个简单的网页密码登陆php代码
2012/07/17 PHP
php resizeimage 部分jpg文件 生成缩略图失败的原因分析及解决办法
2016/03/23 PHP
IE6/7/8中Option元素未设value时Select将获取空字符串
2011/04/07 Javascript
关于jQuery中.attr()和.prop()的问题探讨
2013/09/06 Javascript
jqGrid日期格式的判断示例代码(开始日期与结束日期)
2013/11/08 Javascript
Javascript学习指南
2014/12/01 Javascript
JS实现当前页居中分页效果的方法
2015/06/18 Javascript
纯javascript实现自动发送邮件
2015/10/21 Javascript
javascript实现五星评分功能
2015/11/10 Javascript
jQuery+css实现非常漂亮的水平导航菜单效果
2016/07/27 Javascript
jquery实现的回旋滚动效果完整实例【附demo源码下载】
2016/09/20 Javascript
使用mint-ui开发项目的一些心得(分享)
2017/09/07 Javascript
实现单层json按照key字母顺序排序的示例
2017/12/06 Javascript
JS实现导出Excel的五种方法详解【附源码下载】
2018/03/15 Javascript
微信域名检测接口调用演示步骤(含PHP、Python)
2019/12/08 Javascript
javascript实现简易的计算器
2020/01/17 Javascript
有趣的JavaScript隐式类型转换操作实例分析
2020/05/02 Javascript
小程序实现背景音乐播放和暂停
2020/06/19 Javascript
JQuery通过键盘控制键盘按下与松开触发事件
2020/08/07 jQuery
实用的 vue tags 创建缓存导航的过程实现
2020/12/03 Vue.js
[46:23]OG vs EG 2018国际邀请赛淘汰赛BO3 第一场 8.23
2018/08/24 DOTA
Python 正则表达式入门(中级篇)
2016/12/07 Python
python基础while循环及if判断的实例讲解
2017/08/25 Python
Python简单基础小程序的实例代码
2019/04/28 Python
python绘制封闭多边形教程
2020/02/18 Python
Python爬取365好书中小说代码实例
2020/02/28 Python
Python基础教程(一)——Windows搭建开发Python开发环境
2020/07/20 Python
CSS3实现时间轴特效
2020/11/02 HTML / CSS
在浏览器端如何得到服务器端响应的XML数据
2012/11/24 面试题
大学生毕业自我鉴定范文
2013/09/19 职场文书
会计毕业生自荐信
2013/11/21 职场文书
酒店个人求职信范文
2014/01/25 职场文书
地下停车场租赁协议范本
2014/10/07 职场文书
写给同学的新学期寄语
2015/02/27 职场文书
公司地址变更通知
2015/04/25 职场文书
vue组件vue-esign实现电子签名
2022/04/21 Vue.js