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