input file display local picture

input type="file" displays a local picture on the page as a picture

<form action=""
  enctype="multipart/form-data">
  <input id="file"
         class="filepath"
         accept="image/png, image/jpeg, image/gif, image/jpg"
         @change="changepic(this)"
         type="file"><br>
  <img src=""
       id="show"
       width="200">
</form>

changepic () {
    
    
  var reads = new FileReader();
  let f = document.getElementById('file').files[0];
  reads.readAsDataURL(f);
  reads.onload = function (e) {
    
    
    document.getElementById('show').src = this.result;
  };
},

Reference address: https://blog.csdn.net/weixin_38023551/article/details/78318532?utm_medium=distribute.pc_relevant_t0.none-task-blog-BlogCommendFromMachineLearnPai2-1.control&dist_request_id=678cd3f0-4155-4e19-b0bfm_sourcedepth_1b0bf15-08a =distribute.pc_relevant_t0.none-task-blog-BlogCommendFromMachineLearnPai2-1.control

https://developer.mozilla.org/zh-CN/docs/Web/API/FileReader