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

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

html部分

[code]<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部分

[code]<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部分

[code]<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>