使用Vue实现图片上传及实时预览效果

使用Vue实现图片上传及实时预览效果

• 今天在做字节跳动笔试题的时候遇到一个实现图片上传并且要实时预览效果的要求
• 网上大多数答案是基于原生js的，因为本人最近在学习vue,看了一下讲解之后结合vue的语法尝试几次之后终于实现了。
• 核心代码放在这里主要为了自己以后好找，需要的朋友也可以进行参考。

html部分

"app">
	"filePrew" type="file"  @change="addpht()" ref="img">
	//change监听表单完成文件选择  ref为了在js里找到DOM元素
	<img :src="picSrc" style="width: 200px;height:200px;" >

js部分

<script>
        var vm=new Vue({
            el:"#app",
            data:{
                picSrc:null,
            },
            methods:{
                addpht(){
                    var that=this
                    //注意这里要使用that保存this，不然下方调用f.onload的时候会出现问题
                    console.log(this.$refs.img.files)
                    var f = new FileReader()
                    f.readAsDataURL(this.$refs.img.files[0])
                    f.onload=function(){
                        that.picSrc=f.result
                    }
                }
            }
        })
    </script>