动态头像之谜
最近看到有好多掘友在沸点区讨论动态头像
于是,我报着414的态度,在浏览器中按住Ctrl + T怼了一个新页面,地址栏输入iiter.cn,敲了下回车。
第二排的第二条,从进来的第一眼就注意到它了。
当我再次轻点鼠标,执行完一个click事件的时候。网页已经从掘友导航站切入到掘金PC端首页了,整个过程可谓行云流水。
分析接口
进入掘金个人主页-编辑个人资料。
F12
打开控制台,切换至Network
,再切换到XHR
请求。
点击上传,先上传一个普通格式的头像。
XHR
中,可以看到多了四个请求,我们看后两个即可。
根据命名方式,我们不难看出
- 第一个是用户上传头像接口
- 第二个是更新用户信息接口
点开用户上传头像接口。经过分析,发现是个Post请求,接口是这货:
https://cdn-ms.juejin.im/v1/upload?bucket=gold-user-assets
切换到Preview看一下返回的数据
上传动态头像
ok,我们用此接口测试下能不能上传.gif
格式的图片
打开postman
,新建一个请求,切换至POST
请求,复制粘贴上传头像的接口,Body体切换至form-data
key
改为file
类型。属性名称改为file
选择一个.gif
格式的图片先。
点击蓝色的Send
按钮,看看我们能不能将这个可爱(魔性)
的gif图上传上去。想想还有点小激动......
上传成功后会返回一个当前图片的文件路径,我们复制https
协议开头的
更新用户信息
接下来直接调用更新用户数据
的接口。
接口是下面这货
https://user-storage-api-ms.juejin.im/v1/updateUserInfo
依旧是Post
请求,Form Data
中填充如下参数,头像先给成现在的静态头像试一哈。
Send
ok,postman中更新用户信息成功。我们来试试刚刚上传的
.gif
格式的头像。用刚刚复制的
https
协议开头的路径替换掉postman
里value
的值。点击Send! 更新成功。
验证是否更新成功
切回网页,刷新1下。
已经成功换成动态头像。彩蛋
掘友导航站:iiter.cn (可否设个浏览器首页支持一下?)