vue模拟实现拍照功能

vue模拟实现拍照功能

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

2. 模拟案例：

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. 上传照片： 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"请求
axios的put请求的使用：

axios.put(url,{}).then(res => {})
请求拦截

axios.interceptors.request.use(function (config) {
    //在发送之前做些什么
   
        config.headers['authorization'] = `Bearer eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJodHRwOi8vd3d3LjM2NW1zbWsuY29tL2FwaS9hcHAvbG9naW4iLCJpYXQiOjE1OTg1MjQ5MzEsImV4cCI6MTU5ODgyNzMzMSwibmJmIjoxNTk4NTI0OTMxLCJqdGkiOiJGQXFVS3RxWmdvUkNteEI1Iiwic3ViIjoxMDQyLCJwcnYiOiI5ZjFmZTllMGRmZmJlNDQ0MmRjNzgzMTA3NTFmNTkxY2Y0ZDE0MDIwIn0.lzWqgbnGxqiQUA4hDiHN3FXpI_qmRQ36kHqsLkg23JA`
    

    return config;
}, function (error) {
    // 对请求错误做些什么
    return Promise.reject(error);
});