使用vue怎么實(shí)現(xiàn)一個(gè)更改頭像功能

這期內(nèi)容當(dāng)中小編將會(huì)給大家?guī)碛嘘P(guān)使用vue怎么實(shí)現(xiàn)一個(gè)更改頭像功能，文章內(nèi)容豐富且以專業(yè)的角度為大家分析和敘述，閱讀完這篇文章希望大家可以有所收獲。

Vue的優(yōu)點(diǎn)

Vue具體輕量級(jí)框架、簡(jiǎn)單易學(xué)、雙向數(shù)據(jù)綁定、組件化、數(shù)據(jù)和結(jié)構(gòu)的分離、虛擬DOM、運(yùn)行速度快等優(yōu)勢(shì)，Vue中頁面使用的是局部刷新，不用每次跳轉(zhuǎn)頁面都要請(qǐng)求所有數(shù)據(jù)和dom，可以大大提升訪問速度和用戶體驗(yàn)。

HTML：

<div id="app">
 <div class="item_bock head_p">
   <div class="head_img">
    <img :src="userInfo.avatar"/>
    <--圖片地址動(dòng)態(tài)綁定-->
   </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)
  },
 }
})

注意：

1.  1.this.$el.querySelector('.hiddenInput') 是獲取文檔中 class=”hiddenInput” 的元素。

2. 2.在打開文件夾選中圖片確認(rèn)后，執(zhí)行handleFile函數(shù)

3. 3.let $target = e.target || e.srcElement 表示調(diào)用他的各種屬性，兩個(gè)的區(qū)別是：ie下支持e.srcElement，ff支持e.target。

4. 4.由于手機(jī)上可以選擇多張圖片，所以let file = $target.files[0]，表示取第一張圖。

5. 5.var reader = new FileReader() FileReader 對(duì)象允許Web應(yīng)用程序異步讀取存儲(chǔ)在用戶計(jì)算機(jī)上的文件（或原始數(shù)據(jù)緩沖區(qū)）的內(nèi)容，使用 File 或 Blob 對(duì)象指定要讀取的文件或數(shù)據(jù)。

6. 6.onload 事件會(huì)在頁面或圖像加載完成后立即發(fā)生。

7. 7.FileReader對(duì)象的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;
}

這里只是將圖片顯示出來，并沒有保存起來，如果需要上傳或者保存，需要后臺(tái)接口配合。

上述就是小編為大家分享的使用vue怎么實(shí)現(xiàn)一個(gè)更改頭像功能了，如果剛好有類似的疑惑，不妨參照上述分析進(jìn)行理解。如果想知道更多相關(guān)知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道。