使用vue怎么实现一个更改头像功能
这期内容当中小编将会给大家带来有关使用vue怎么实现一个更改头像功能，文章内容丰富且以专业的角度为大家分析和叙述，阅读完这篇文章希望大家可以有所收获。
创新互联公司专业IDC数据服务器托管提供商，专业提供成都服务器托管，服务器租用，四川雅安电信机房，四川雅安电信机房，成都多线服务器托管等服务器托管服务。
Vue的优点
Vue具体轻量级框架、简单易学、双向数据绑定、组件化、数据和结构的分离、虚拟DOM、运行速度快等优势，Vue中页面使用的是局部刷新，不用每次跳转页面都要请求所有数据和dom，可以大大提升访问速度和用户体验。
HTML：
<--图片地址动态绑定-->
更改头像
注意：
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.this.$el.querySelector('.hiddenInput') 是获取文档中 class=”hiddenInput” 的元素。
2.在打开文件夹选中图片确认后，执行handleFile函数
3.let $target = e.target || e.srcElement 表示调用他的各种属性，两个的区别是：ie下支持e.srcElement，ff支持e.target。
4.由于手机上可以选择多张图片，所以let file = $target.files[0]，表示取第一张图。
5.var reader = new FileReader() FileReader 对象允许Web应用程序异步读取存储在用户计算机上的文件（或原始数据缓冲区）的内容，使用 File 或 Blob 对象指定要读取的文件或数据。
6.onload 事件会在页面或图像加载完成后立即发生。
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怎么实现一个更改头像功能了，如果刚好有类似的疑惑，不妨参照上述分析进行理解。如果想知道更多相关知识，欢迎关注创新互联行业资讯频道。
本文名称：使用vue怎么实现一个更改头像功能
文章链接：http://bzwzjz.com/article/jojcoo.html
