更换vue项目中我的头像

头像"/>

更换vue项目中我的头像

最近做了一个更换头像的效果，觉得挺有意思的，嘿嘿，，今天来说一说具体的操作吧。。。
效果图为：

点击拍照能够出现摄像机，拍照换头像
点击手机相册则是直接从相册中选择更换
取消则是不更换
首先要了解一些知识点

上传文件表单：
1.<input type="file" accept="image/*" capture="camera" >2. type="file" 上传文件表单 accept="image/*" 上传文件类型3.capture="camera" 使用手机摄像头拍摄

页面布局为：

//这个是原来没更换前的头像<van-cell title="头像" @click="showShare = true" is-link><img :src="imgUrl" alt class="update_img" /></van-cell>//下面的弹框实现更换头像<van-popup v-model="showShare" position="bottom" :style="{ height: '30%' }"><div class="tankuang"><div>拍照<input type="file" accept="image/*" capture="camera" @change="update($event)" /></div><div>用手机相册<input type="file" accept="image/*" @change="update($event)" /></div><div @click="cancle">取消</div></div></van-popup>

 data: function() {return {showShare: false,imgUrl: ""}}

1.首先点击图像出来弹框
2.执行拍照事件和用手机相册两者的执行是一样的，可以写同一个点击事件
注：记得要用change事件

 update(e) {let token;if (localStorage.getItem("token")) {token = `Bearer ${localStorage.getItem("token")}`;}console.log(e);let formData = new FormData();formData.append("file", e.target.files[0]);console.log("dsa", formData);axios.post("?",{data: formData}).then(res => {// 此数据是为了获取到本地选择的图片console.log(res);//res.data.data.path是接口中获取本地图片的地址if (res.data.code === 200) {axios.put(`/?avatar=${res.data.data.path}`,{},{headers: {authorization: `Bearer ${localStorage.getItem("token")}`}}).then(res => {console.log("图像路径", res);this.imgUrl = res.data.data.avatar;this.getUserFor();  //这个方法是为了更新这个页面的数据this.showShare = false;});}});},getUserFor() {axios.get("?").then(res => {console.log(res);this.imgUrl = res.data.data.avatar;});},created() {this.getUserFor();  //进入页面之前便要获取这个页面的数据},

具体操作就是这样，但是大家要注意接口这方面，我的接口和大家的不一样，为了防止出错，所以我用符号表示

流程:上传图片设置头像更新头像