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.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.srcElementlet file = $target.files[0]var reader = new FileReader()reader.onload = (data) => {let res = data.target || data.srcElementthis.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;
}

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

来源https://blog.csdn.net/weixin_41941325/article/details/80764680

vue 更改头像功能实现相关推荐

node简单实现一个更改头像功能
前言一直想写这篇文章,无奈由于要考试的原因,一直在复习,拖延到现在才写?,之前用 node 的 express 框架写了个小项目,里面有个上传图片的功能,这里记录一下如何实现(我使用的是 ejs)? ...
vue列表左右箭头滑动_vue.js+elementUI实现点击左右箭头切换头像功能（类似轮播图效果）...
1.效果图如下 2.vue代码如下 indicator-position="none" :autoplay="false"> > {{items.b ...
VUE图片裁剪功能vue-img-cutter
VUE图片裁剪功能vue-img-cutter 前言: 演示地址兼容IE9+,MSEdge,Chrome,Firefox 两种展现形式,行内或弹窗可旋转.缩放图片任意比例.大小裁剪固定比例.大 ...
Vue 彩色头像|一个有趣的头像生成器附源码
前言这是一款矢量风格的头像生成器,您可以搭配不同的素材组件,生成属于您自己的个性化头像. 介绍您可能感兴趣的功能: 可视化组件配置栏随机生成头像重做/撤消国际化批量生成多个头像在线体验 ...
flask上传头像功能
上传头像功能只需要以下N步: 首先我们要从HTML中获取头像文件获取后,传入视图函数 # user.py # 修改用户头像功能 @user_blu.route("/user/avatar& ...
教师管理平台-----servlet+html修改个人资料及更改头像
第二个功能修改个人资料以及更改头像目录结构和其他代码接上https://blog.csdn.net/ignite_/article/details/90453076 前台html代码: 个人中心加上 ...
php 修改头像案例,在laravel5.2中实现点击用户头像更改头像的方法
视图层 !!!自己下载jquery文件和ajaxfileUpload的插件 //下面用于图片上传预览功能 function setImagePreview(avalue) { var docObj=d ...
升级IOS8游戏上传自定义头像功能失效的问题
为了支持arm64,之前已经折腾了很久,昨晚打包准备提交苹果审核时,测试那边的同事反馈说游戏上传自定义头像功能不可用了. 游戏上传自定义功能的简介:卡牌游戏最初是<比武招亲>中有一个充VI ...
php拍视频上传,php视频拍照上传头像功能实现代码分享
现在手机拍照很火,那么如何使用手机拍照并上传头像呢?原因很简单,就是数据传递,首先手机传递照片信息,既不是post传递也不是get函数传递,这个另外一种数据如果要在php中实现视频拍照我们需要借助于 ...

vue 更改头像功能实现

vue 更改头像功能实现相关推荐

最新文章

热门文章