JS realizes clicking avatar to upload picture modification

Post only key code parts ：

input Set the style of to hide , There will be no button to select a file  ; event handlefile To handle uploaded images     

img Click the event according to its id binding input Click events for   , In this way, click the picture to click input Select Picture   ;  ：src Here is the dynamic loading path , Unnecessary direct src=“” Just fine

<input type="file" id="f" accept="image/*" @change="handleFile" class="hiddenInput" style="display:none"/>

<img id="img"  class="avatarImg" :src="this.avatar" onclick="f.click()">

JS Code ：   （ I use vue Written , Only the front-end part ; To upload to the backend , You need to add the code to the database ）  

methods:{
    //  Open picture upload 
    uploadHeadImg: function () {
      this.$el.querySelector('.hiddenInput').click()                // binding input The name of the class 
    },
    //  Show Avatar 
    handleFile: function (e) {
      let $target = e.target || e.srcElement
      let file = $target.files[0]
      var reader = new FileReader()                   // Create a file reader instance 
      reader.onload = (data) => {
        let res = data.target || data.srcElement
        this.avatar = res.result
      }
      reader.readAsDataURL(file)               
    },
}