实现 vue点击图片上传 预览图片

实现 vue 点击图片上传 预览图片

模板部分

<div>
	<img :src="img" @click="onclickImg" style="width: 100px;height: 100px;" title="点击上传">
	<input type="file" ref="file" @change="preview" accept="image/*" style="display: none">
</div>

script部分

data(){
	return{
	  img:''
	}
},
methods:{
	//点击图片唤起本地文件夹
	onclickImg:function () {
		this.$refs.file.click()
	},
	//预览图片
	preview:function (e) {
		let _this = this;
		let file = e.target.files[0]
		if(!file){
			return
		}
		var reader = new FileReader()
		reader.readAsDataURL(e.target.files[0])
		reader.onloadend = function () {
			_this.img = this.result
		}
	},
	//上传图片
	uploadImg:function () {
		let url = '/upload'
		let file = this.$refs.file.files[0];
		if(!file){
		  return
		}
		let format = new FormData()
		format.append('file',file)
		this.$axios.post(url,format).then(response=>{
		 	//上传后逻辑
		})
	}
},

相关功能：重新渲染组件 使用key
模板部分

<Header :key="headerKey"/>

script部分

data(){
	return{
		headerKey:0
	}
},
methods:{
	//修改key则重新渲染组件
	reload:function(){
		this.headerKey += 1
	}
}