vue框架input框上传图片文件实时显示
Posted xiao-lei-ge
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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;
};
},
}
以上是关于vue框架input框上传图片文件实时显示的主要内容,如果未能解决你的问题,请参考以下文章
vue中使用axios post上传头像/图片并实时显示到页面
vue中input标签上传本地文件或图片后获取完整路径,如E:medicineOfCHstageImagexxx.jpg