更换vue项目中我的头像

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

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

上传文件表单：
1.

 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("http://xxx.com/xxx/xxx/xxx?",
      {
     
      data: formData
      }).then(res => {
     
        // 此数据是为了获取到本地选择的图片
        console.log(res);
        //res.data.data.path是接口中获取本地图片的地址
        if (res.data.code === 200) {
     
          axios
            .put(
              `https://www.365msmk.com/api/app/user/?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("http://xxx.com/xxx/xxx/xxx?").then(res => {
     
        console.log(res);
        this.imgUrl = res.data.data.avatar;
      });
    },


  created() {
     
    this.getUserFor();  //进入页面之前便要获取这个页面的数据
  },

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

流程:

      上传图片
      设置头像
      更新头像