vue简单的图片上传并显示

做项目是碰到图片上传问题 ，简单写一下方便以后查阅

html代码

<div class="rz-picter">
        <img :src="avatar" class="img-avatar">
		<input type="file" name="avatar" id="uppic" accept="image/gif,image/jpeg,image/jpg,image/png" @change="changeImage($event)" ref="avatarInput" class="uppic">
	div>

js代码

changeImage(e) {
     
				console.log(e.target.files)
				var file = e.target.files[0]
				var reader = new FileReader()
				var that = this
				reader.readAsDataURL(file)
				reader.onload = function(e) {
     
				  that.avatar = this.result
				}
			  },

data定义

data(){
     
			return{
     
				avatar:""
			}
		},
		avatar   可以定义为空，也可以定义为图片路径

简单的图片上传并显示就可以了