入力ファイル表示ローカル画像

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-b0bfm_sourcedepth_1b0 .pc_relevant_t0.none-task-blog-BlogCommendFromMachineLearnPai2-1.control

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