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中input框的fileREader技术上传图片

vue中使用axios post上传头像/图片并实时显示到页面

关于使用Input框上传图片的二进制数据传输

vue实现图片上传

vue 实现图片上传与预览,以及清除图片

vue中input标签上传本地文件或图片后获取完整路径,如E:medicineOfCHstageImagexxx.jpg