详解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 封装Ajax传递的数据代码
Jun 05 Javascript
js下用层来实现select的title提示属性
Feb 23 Javascript
jQuery 借助插件Lavalamp实现导航条动态美化效果
Sep 27 Javascript
js动态控制table的tr、td增加及删除的具体实现
Apr 30 Javascript
使用jQuery判断IE浏览器版本的代码
Jun 14 Javascript
教你在heroku云平台上部署Node.js应用
Jul 30 Javascript
jQuery判断一个元素是否可见的方法
Jun 05 Javascript
详解Node.Js如何处理post数据
Sep 19 Javascript
ng-alain表单使用方式详解
Jul 10 Javascript
微信小程序实现语音识别转文字功能及遇到的坑
Aug 02 Javascript
JS获取当前时间戳方法解析
Aug 29 Javascript
微信小程序实现星星评分效果
Nov 01 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概述.
2006/10/09 PHP
xajax写的留言本
2006/11/25 PHP
详解:――如何将图片储存在数据库里
2006/12/05 PHP
用PHP书写安全的脚本代码
2012/02/05 PHP
PHP实现图片旋转效果实例代码
2014/10/01 PHP
php实现中文转数字
2016/02/18 PHP
php微信浏览器分享设置以及回调详解
2016/08/01 PHP
Laravel向公共模板赋值方法总结
2019/06/25 PHP
Thinkphp集成抖音SDK的实现方法
2020/04/28 PHP
js获得参数的getParameter使用示例
2014/02/26 Javascript
javascript字符串替换函数如何一次性全部替换掉
2015/10/30 Javascript
常用Javascript函数与原型功能收藏(必看篇)
2016/10/09 Javascript
Bootstrap整体框架之JavaScript插件架构
2016/12/15 Javascript
js 函数式编程学习笔记
2017/03/25 Javascript
javascript与PHP动态往类中添加方法对比
2018/03/21 Javascript
Nodejs调用Dll模块的方法
2018/09/17 NodeJs
node.js ws模块搭建websocket服务端的方法示例
2019/04/25 Javascript
Express 配置HTML页面访问的实现
2020/11/01 Javascript
vue3.0+vue-router+element-plus初实践
2020/12/02 Vue.js
[06:14]《辉夜杯》外卡赛附加赛 4支战队巡礼
2015/10/23 DOTA
举例介绍Python中的25个隐藏特性
2015/03/30 Python
Python实现string字符串连接的方法总结【8种方式】
2018/07/06 Python
python向字符串中添加元素的实例方法
2019/06/28 Python
pygame实现俄罗斯方块游戏(AI篇1)
2019/10/29 Python
Pytorch转tflite方式
2020/05/25 Python
Keras load_model 导入错误的解决方式
2020/06/09 Python
台湾深度自由行旅游平台:Tripbaa趣吧
2017/10/10 全球购物
社区母亲节活动方案
2014/03/05 职场文书
中学生家长评语大全
2014/04/16 职场文书
推荐信格式范文
2014/05/09 职场文书
求职信的正确写法
2014/07/10 职场文书
医院我们的节日活动实施方案
2014/08/22 职场文书
学术会议开幕词
2016/03/03 职场文书
如何书写你的职业生涯规划书?
2019/06/27 职场文书
html+css 实现简易导航栏功能
2021/04/07 HTML / CSS
React实现动效弹窗组件
2021/06/21 Javascript