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
- 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 更改头像功能实现的更多相关文章
- Vue.js 基本功能了解
一.写在前面 隔了这么久才来出Vue的第二篇文章,真是堕落了,自己先惩罚下/(ㄒoㄒ)/~~ 回过头看自己第一篇相关文章<初试 Vue.js>(http://www.cnblogs.com ...
- Vue.js 基本功能了解一下~
一.写在前面 隔了这么久才来出Vue的第二篇文章,真是堕落了,自己先惩罚下/(ㄒoㄒ)/~~ 回过头看自己第一篇相关文章<初试 Vue.js>(http://www.cnblogs.com ...
- 升级IOS8游戏上传自定义头像功能失效的问题
为了支持arm64,之前已经折腾了很久,昨晚打包准备提交苹果审核时,测试那边的同事反馈说游戏上传自定义头像功能不可用了. 游戏上传自定义功能的简介:卡牌游戏最初是<比武招亲>中有一个充VI ...
- Vue实现上传图片功能
前言: 用vue实现上传图片功能,效果图如下: 先说文件上传控件样式美化怎么做,我有两种方法. 1.先上代码 html部分: <div class="pics-wrapper" ...
- vue实现搜索功能
vue实现搜索功能 template 部分 <!-- 搜索页面 --> <template> <div> <div class="goback&qu ...
- vue实战记录(二)- vue实现购物车功能之创建vue实例
vue实战,一步步实现vue购物车功能的过程记录,课程与素材来自慕课网,自己搭建了express本地服务器来请求数据 作者:狐狸家的鱼 本文链接:vue实战-实现购物车功能(二) GitHub:sue ...
- 中小研发团队架构实践之生产环境诊断工具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如同医生的听诊器,是系统生病时做问题诊断的逆向分析工具 ...
- MUI---上传头像功能实现
这里使用MUI上传头像的功能是结合VUE来做的,所以: changeFace:function(){ var IMAGE_UNSPECIFIED = "image/*"; //相册 ...
- 我的Vue之小功能统计
摘要:项目中经常会要用到大大小小的功能,所以我在这里进行一个汇总,后面会持续添加至这篇博客,希望当你遇到这个功能时,我的博客能够对你有帮助,(上一篇博客说要在收假后写一篇博客做一个年终总结,想了半天不 ...
随机推荐
- hdu 4951
Multiplication table Time Limit: 4000/2000 MS (Java/Others) Memory Limit: 65536/65536 K (Java/Oth ...
- SharedPreferences 存储数组+双击退出
public static void saveApkEnalbleArray(Context context,boolean[] booleanArray) { SharedPreferences p ...
- 不拖控件的asp.net编程方法——第1回
以前写的asp.net程序基本上都用了webfrom的控件编写的,当然有个好处就是易入门.快速效率高,但感觉自己这了几个小系统,还是没学到什么东西,感觉心里没底,因为都是封装好的东西,拿来就用的,功能 ...
- (47)C#运行时序列化
序列化是将对象或对象图转化成字节流的过程.反序列化是将字节流转换回对象图的过程.
- (45)C#网络3 socket
一.TCP传输 using System.Net.Sockets; 1.最基本客户端连服务器 服务端运行后一直处于监听状态,客户端每启动一次服务端就接收一次连接并打印客户端的ip地址和端口号.(服务端 ...
- 教妹学 Java:大有可为的集合
00.故事的起源 “二哥,上一篇<泛型>的反响效果怎么样啊?”三妹对她提议的<教妹学 Java>专栏很是关心. “有人评论说,‘二哥你敲代码都敲出幻想了啊.’” “呵呵,这句话 ...
- NOIP前必须记住的30句话
NOIP前必须记住的30句话 1.比赛前一天晚上请准备好你的各种证件,事先查好去往考场的路线2.比赛之前请先调整你的屏幕分辨率到你喜欢的大小3.比赛之前请把编译器的字体调为你平时惯用的字体,尤其是注意 ...
- windows redis 服务安装坑
环境 winserver 2012 最新版的redis:3.0.503 redis-server.exe --service-install redis.windows.conf --m ...
- [Javascript] Convert a Callback-Based JavaScript Function to a Promise-Based One
Sometimes, you might want to convert a JavaScript function that accepts a callback to one that retur ...
- 使用Python控制1602液晶屏实时显示时间(附PyCharm远程调试)
前言 原创文章,转载引用务必注明链接.水平有限,如有疏漏,欢迎指正. 本文介绍一下UP板的GPIO资源使用,以及一个使用Python演示一个简单的demo. 本文使用Markdown写成,为获得更好的 ...