如上图所示：需要完成的功能是点击更改头像，获取本地文件库，选择图片后将原始图片替换。这里我就直接用html文件引入vue来简单实现在这功能，代码如下：
HTML：
<div id="app">
<div class="item_bock head_p">
<div class="head_img">
<img :src="/UploadFiles/2021-04-02/userInfo.avatar">
注意：
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更改头像功能实现详解整合，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线
暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。
艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。
《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒 经典版》的玩家都可以获得奖励。