input file 显示本地图片

input type="file"把一张本地的图片以图片形式显示在页面上

<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;
  };
},

参考地址：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-b0bf-08aecbcf9e15&depth_1-utm_source=distribute.pc_relevant_t0.none-task-blog-BlogCommendFromMachineLearnPai2-1.control

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