vue html jq 实现上传图片显示在页面上预览

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/haeasringnar/article/details/82351618

1、html代码

<img src="" alt="" id="myimg">
<input type="file" name="fileToUpload" id="fileToUpload" 
 @change='changeimage($event)'>

注意这里面定义的方法changeimage

2、script代码写在methods里面

getObjectURL(file) {  
var url = null ;   
 // 下面函数执行的效果是一样的，只是需要针对不同的浏览器执行不同的 js 函数而已  
 if (window.createObjectURL!=undefined) { // basic  
     url = window.createObjectURL(file) ;  
 } else if (window.URL!=undefined) { // mozilla(firefox)  
     url = window.URL.createObjectURL(file) ;  
 } else if (window.webkitURL!=undefined) { // webkit or chrome  
     url = window.webkitURL.createObjectURL(file) ;  
 }  
 return url ;  
},
changeimage (event) {
    // 调用上面的方法
 var objurl = this.getObjectURL(event.target.files[0])
 console.log(objurl)
 $('#myimg').attr('src',objurl)
}