当前位置： 移动技术网 > IT编程>脚本编程>vue.js > 详解vue更改头像功能实现

详解vue更改头像功能实现

2019年07月21日  | 移动技术网IT编程  | 我要评论

爱上复仇三姐妹,新加坡狮城华人网,中山路攻略

如上图所示：需要完成的功能是点击更改头像，获取本地文件库，选择图片后将原始图片替换。这里我就直接用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更改头像功能实现详解整合，希望对大家有所帮助

您可能感兴趣的文章:

如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！ 点击进行留言回复

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网