vue项目中实现头像上传（axios请求）

vue项目中做个人资料时需要实现用户头像的更换

html部分

<template>  
  <div class="dataLeft">
	<p class="pic" style="width: 106px">
       <img :src="this.$picUrl+userInor.pic" alt="">//src部分是从后端获取的图像，再次不在赘述
    </p>
    <p class="upload">上传头像
	<input type="file" @change="upDataPic" enctype="" accept="image/*" class="uploadBtn"/>
    </p>
   </div>
</template>

css部分

<style>
.pic{
		width:106px;
		height:106px;
		overflow: hidden;
		border-radius:50%;
		background:white;
	}
.pic img{
		width: 100%;
		height: 100%;
	}
.upload{
		font-size:12px;
		text-align: center;
		line-height: 36px;
	}
</style>

js部分

<script>
upDataPic(e){								
	let file = e.target.files[0];  
	var picData=new FormData();
	picData.append('file',file,file.name);
	// console.log(picData)
	this.$http({
		url:"接口url",
		method:'post',
		data:picData,
	})
	.then(response=>{
		if(response.data.success==true){
			this.$swal.fire({//swal是引用的弹框插件，如需要，可百度查找
			    text:'上传成功',
				icon:'success'
			})
			this.userIcon=response.data.filePath;
			this.getInfor();
		}else{
			this.$swal.fire({//swal是引用的弹框插件，如需要，可百度查找
				text:res.data.msg
			})
		}
	})
	.catch(Error=>{
					
	})
}
</script>