大事件项目23---个人中心—更换头像——调用接口保存,并让Vuex更新

简介: 大事件项目23---个人中心—更换头像——调用接口保存,并让Vuex更新

1、更新的是用户头像,我再这里找一找

2、请求的方式叫做PATCH

3、理所当然,我还得带上token,告诉后台我是谁

4、弄好之后,你也可以提前看一下,他返回的响应

5、写一个更新用户用户头像的API方法:接下来,我们调用,我们统一的axios函数,看请求地址,我们来到,接口文档

6、这里token,我们能不能上传

7、body体就一个avator选项,就传一个字符串

8、只需要一个参数,就不用解构赋值了

9、参数的写法

10、我们先把方法请过来

11、这个是为了点击,文件选择窗口,这里是用户选择文件,我们来接收结果

12、接着用户点击这个按钮,就可以实现点击头像

13、绑定一个点击事件

14、uploadFn叫做上传

15、这里要的是一个base64的字符串

16、请求传参结束,然后打印一下结果

17、我们看一下后台返回的数据,提示你后台更新成功了,我还要通过后台的keyValue的值来进行一个判断

18、不等于0,证明后台数据是有问题的,现在我要提示消息,表示反馈错误

19、成功之后,也给他一个更新用户头像成功的消息

20、接下来,我们把头像给改一下,他的头像地址究竟改在哪里呢?

21、我如何让Vuex让他更新一下呢?前面我们保存到了用户名,让他传给了后台

22、我们调这个axios,让Vuex重新获取一下这个axios,里面让Vuex请求一下后台

23、最后,我们git,进行提交一下就行


相关文章
|
11月前
uniapp 全局数据(globalData)的设置,获取,更改
uniapp 全局数据(globalData)的设置,获取,更改
1088 0
|
2天前
|
开发工具 git
大事件项目19_个人中心_基本资料调接口更新保存
大事件项目19_个人中心_基本资料调接口更新保存
|
2天前
|
前端开发 开发工具 git
大事件项目04-注册和登录两个页面的准备
大事件项目04-注册和登录两个页面的准备
|
24天前
|
存储 JavaScript 安全
JS 监听用户页面访问&页面关闭操作并进行数据上报
JS 监听用户页面访问&页面关闭操作并进行数据上报 第一次进入页面时触发页面访问 刷新当前页面时触发页面访问 新 tab 进入页面时触发页面访问 当前页面点击 nav 进入其他模块时,触发页面关闭&页面访问 关闭页面时触发页面关闭
20 0
|
2月前
|
JavaScript
vue列表信息展示中新增数据,与编辑数据页面复用,降低重复代码
vue列表信息展示中新增数据,与编辑数据页面复用,降低重复代码
180 2
|
2月前
uni-app 76聊天类封装(十一)-更新会话列表(二)
uni-app 76聊天类封装(十一)-更新会话列表(二)
23 1
|
2月前
uni-app 75聊天类封装(十)-更新会话列表(一)
uni-app 75聊天类封装(十)-更新会话列表(一)
23 0
|
2月前
|
JavaScript 前端开发 Java
若依框架---选中某值 其他值自动回调填充
若依框架---选中某值 其他值自动回调填充
100 0
|
2月前
|
JavaScript
vue制作防止用户未登录或未填写信息就跳转页面的路由拦截器
vue制作防止用户未登录或未填写信息就跳转页面的路由拦截器
46 0
|
11月前
|
JavaScript 前端开发
如何阻止在 vue项目中快速双击俩次新增/编辑连续发送俩次请求
如何阻止在 vue项目中快速双击俩次新增/编辑连续发送俩次请求
63 0