招聘小程序免费模板_详解vue更改头像功用完成

2021-01-07 14:18| 发布者: | 查看: |

详解vue更改头像功能实现       这篇文章主要介绍了vue更改头像功能实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

如上图所示:需要完成的功能是点击更改头像,获取本地文件库,选择图片后将原始图片替换。这里我就直接用html文件引入vue来简单实现在这功能,代码如下:

HTML:

 div id="app" 
 div 
 div 
 img :src="userInfo.avatar"/ 
 --图片地址动态绑定-- 
 /div 
 div @click.stop="uploadHeadImg" 
 div 更改头像 /div 
 /div 
 input type="file" accept="image/*" @change="handleFile" / 
 /div 
 /div 

注意:

1.accept 属性用于限制图像的格式 如:(accept=”image/gif, image/jpeg”),accept=”image/*”表示不限制格式。
2.真正打开本地文件的是input,但这里是将其隐藏的。

JS:

var app = new Vue({
 el: '#app',
 data: {
 userInfo: {
 avatar: '-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') 是获取文档中 >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更改头像功能实现详解整合,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对凡科网站的支持!


<
>

 
QQ在线咨询
售前咨询热线
18720358503
售后服务热线
18720358503
返回顶部