掘金的动态头像,你安排上了吗?

13,053 阅读2分钟

动态头像之谜

最近看到有好多掘友在沸点区讨论动态头像
于是,我报着414的态度,在浏览器中按住Ctrl + T怼了一个新页面,地址栏输入iiter.cn,敲了下回车。

20204260726
是它!就是它!
第二排的第二条,从进来的第一眼就注意到它了。
当我再次轻点鼠标,执行完一个click事件的时候。网页已经从掘友导航站切入到掘金PC端首页了,整个过程可谓行云流水。

分析接口

进入掘金个人主页-编辑个人资料。
F12打开控制台,切换至Network,再切换到XHR请求。 点击上传,先上传一个普通格式的头像。

2020425174633
切到XHR中,可以看到多了四个请求,我们看后两个即可。
202042517485
根据命名方式,我们不难看出

  • 第一个是用户上传头像接口
  • 第二个是更新用户信息接口

点开用户上传头像接口。经过分析,发现是个Post请求,接口是这货:
https://cdn-ms.juejin.im/v1/upload?bucket=gold-user-assets
切换到Preview看一下返回的数据

20204251836

上传动态头像

ok,我们用此接口测试下能不能上传.gif格式的图片 打开postman,新建一个请求,切换至POST请求,复制粘贴上传头像的接口,Body体切换至form-data

202042518718
并将key改为file类型。属性名称改为file
202042518937
20204251896
2020426125354
选择一个.gif格式的图片先。
2020425181123
点击蓝色的Send按钮,看看我们能不能将这个可爱(魔性)的gif图上传上去。想想还有点小激动......
2020425181238
上传成功后会返回一个当前图片的文件路径,我们复制https协议开头的
2020426125539

更新用户信息

接下来直接调用更新用户数据的接口。
接口是下面这货
https://user-storage-api-ms.juejin.im/v1/updateUserInfo
依旧是Post请求,Form Data中填充如下参数,头像先给成现在的静态头像试一哈。

202042523024
202042523235
点!击!Send
202042523311
ok,postman中更新用户信息成功。
我们来试试刚刚上传的.gif格式的头像。
用刚刚复制的https协议开头的路径替换掉postmanvalue的值。
点击Send!
202042523311
更新成功。

验证是否更新成功

切回网页,刷新1下。

202042523623
已经成功换成动态头像。

彩蛋

掘友导航站:iiter.cn (可否设个浏览器首页支持一下?)

2020425235817

https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2020/7/3/1731311e1a1a54aa~tplv-t2oaga2asx-image.image