vue点击更换头像实现拍照功能和选择相册更换头像

1. 上传文件表单：

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

2. 请求参数为FormData 类型

   new FormData()
   
   let formData = new FormData()          formData.append('file', e.target.files[0])
   

• 上传文件（二进制格式上传）
• 提交form表单

1. 对接口了解一下

1. 上传照片： https://www.365msmk.com/api/app/public/img
"Post"请求
2.获取上传照片的网址路径
https://www.365msmk.com/api/app/user
"put"请求
3. https://www.365msmk.com/api/app/userInfo
"GET"请求

1. axios的put请求的使用：

   axios.put(url,{}).then(res => {})
   

   1. 请求拦截

      axios.interceptors.request.use(function (config) {
          //在发送之前做些什么
         
              config.headers['authorization'] = `Bearer eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJodHRwOi8vd3d3LjM2NW1zbWsuY29tL2FwaS9hcHAvbG9naW4iLCJpYXQiOjE1OTg1MjQ5MzEsImV4cCI6MTU5ODgyNzMzMSwibmJmIjoxNTk4NTI0OTMxLCJqdGkiOiJGQXFVS3RxWmdvUkNteEI1Iiwic3ViIjoxMDQyLCJwcnYiOiI5ZjFmZTllMGRmZmJlNDQ0MmRjNzgzMTA3NTFmNTkxY2Y0ZDE0MDIwIn0.lzWqgbnGxqiQUA4hDiHN3FXpI_qmRQ36kHqsLkg23JA`
          
      
          return config;
      }, function (error) {
          // 对请求错误做些什么
          return Promise.reject(error);
      });
      

流程:

1. 上传图片
2. 设置头像
3. 更新头像