如上圖所示：需要完成的功能是點擊更改頭像，獲取本地文件庫，選擇圖片后將原始圖片替換。這里我就直接用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.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) }, }})注意：
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更改頭像功能實現詳解整合，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對武林網網站的支持！
新聞熱點
疑難解答
