vue框架input框上传图片文件实时显示
body部分:
上传图片<input type="file" ref="file2" name="check_img_url" @change="tirggerFile($event)" />
<div>
<img style="width:100px;height:100px;margin-left:105px" id="img2" src alt />
</div>
script部分:
methods:{
tirggerFile(event) {
var file = event.target.files;
var reader = new FileReader();//读取文件
reader.readAsDataURL(file[0]);
reader.onload = function() {
document.getElementById("img1").src = reader.result;
};
},
}
本人小白,各位想踏入前端的,我们可以一起学习,欢迎程序员大佬的指点