——————– 
如上图所示:需要完成的功能是点击更改头像,获取本地文件库,选择图片后将原始图片替换。这里我就直接用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
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12

注意: 
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
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26

注意: 
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;
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35

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

vue 更改头像功能实现的更多相关文章

  1. Vue.js 基本功能了解

    一.写在前面 隔了这么久才来出Vue的第二篇文章,真是堕落了,自己先惩罚下/(ㄒoㄒ)/~~ 回过头看自己第一篇相关文章<初试 Vue.js>(http://www.cnblogs.com ...

  2. Vue.js 基本功能了解一下~

    一.写在前面 隔了这么久才来出Vue的第二篇文章,真是堕落了,自己先惩罚下/(ㄒoㄒ)/~~ 回过头看自己第一篇相关文章<初试 Vue.js>(http://www.cnblogs.com ...

  3. 升级IOS8游戏上传自定义头像功能失效的问题

    为了支持arm64,之前已经折腾了很久,昨晚打包准备提交苹果审核时,测试那边的同事反馈说游戏上传自定义头像功能不可用了. 游戏上传自定义功能的简介:卡牌游戏最初是<比武招亲>中有一个充VI ...

  4. Vue实现上传图片功能

    前言: 用vue实现上传图片功能,效果图如下: 先说文件上传控件样式美化怎么做,我有两种方法. 1.先上代码 html部分: <div class="pics-wrapper" ...

  5. vue实现搜索功能

    vue实现搜索功能 template 部分 <!-- 搜索页面 --> <template> <div> <div class="goback&qu ...

  6. vue实战记录(二)- vue实现购物车功能之创建vue实例

    vue实战,一步步实现vue购物车功能的过程记录,课程与素材来自慕课网,自己搭建了express本地服务器来请求数据 作者:狐狸家的鱼 本文链接:vue实战-实现购物车功能(二) GitHub:sue ...

  7. 中小研发团队架构实践之生产环境诊断工具WinDbg 三分钟学会.NET微服务之Polly 使用.Net Core+IView+Vue集成上传图片功能 Fiddler原理~知多少? ABP框架(asp.net core 2.X+Vue)模板项目学习之路(一) C#程序中设置全局代理(Global Proxy) WCF 4.0 使用说明 如何在IIS上发布,并能正常访问

    中小研发团队架构实践之生产环境诊断工具WinDbg 生产环境偶尔会出现一些异常问题,WinDbg或GDB是解决此类问题的利器.调试工具WinDbg如同医生的听诊器,是系统生病时做问题诊断的逆向分析工具 ...

  8. MUI---上传头像功能实现

    这里使用MUI上传头像的功能是结合VUE来做的,所以: changeFace:function(){ var IMAGE_UNSPECIFIED = "image/*"; //相册 ...

  9. 我的Vue之小功能统计

    摘要:项目中经常会要用到大大小小的功能,所以我在这里进行一个汇总,后面会持续添加至这篇博客,希望当你遇到这个功能时,我的博客能够对你有帮助,(上一篇博客说要在收假后写一篇博客做一个年终总结,想了半天不 ...

随机推荐

  1. JCaptcha+Memcache的验证码集群实现

    一.问题背景 为了防止垃圾信息发布机器人的自动提交攻击,采用CAPTCHA验证码来保护该模块,提高攻击者的成本. 二.验证码简介 全自动区分计算机和人类的图灵测试(Completely Automat ...

  2. css样式---隐藏元素

    1.通过设置width:0;或height:0 2.将元素的opacity设置成0 3.通过定位将元素移出屏幕范围 4.通过text-indent实现隐藏文字的效果 5.通过z-index隐藏一个元素 ...

  3. 强大的stringstream

    [本文来自]http://www.builder.com.cn/2003/0304/83250.shtmlhttp://www.cppblog.com/alantop/archive/2007/07/ ...

  4. LeetCode:926. 将字符串翻转到单调递增

    暴力法超时:思想:动态规划 public int minFlipsMonoIncrb(String S) { int result = S.length(); for (int i = 0; i &l ...

  5. 【Todo】ssh的原理和实践

    有空的时候补充,可以参考 http://www.ruanyifeng.com/blog/2011/12/ssh_remote_login.html http://www.ruanyifeng.com/ ...

  6. 【Todo】Java Callable和Future学习

    参考这篇文章:http://blog.csdn.net/ghsau/article/details/7451464  还有一个系列<Java多线程>

  7. [反汇编练习] 160个CrackMe之023

    [反汇编练习] 160个CrackMe之023. 本系列文章的目的是从一个没有任何经验的新手的角度(其实就是我自己),一步步尝试将160个CrackMe全部破解,如果可以,通过任何方式写出一个类似于注 ...

  8. Linux中修改docker镜像源及安装docker

    1.首先备份系统自带yum源配置文件/etc/yum.repos.d/CentOS-Base.repo mv /etc/yum.repos.d/CentOS-Base.repo /etc/yum.re ...

  9. JBoss 6.1安装配置问题

    一,配置环境变量 JBOSS_HOME:配置到解压文件的根文件夹下: classpath跟JAVA_HOME:配置的解压文件夹\bin文件夹以下: 二,訪问端口号 因为我之前安装过Tomcat,所以占 ...

  10. SolidEdge 如何由装配图快速生成爆炸视图

    建立图纸精灵,组态中选择explode(没有下一步可选了)   点击完成即可绘制爆炸图