掘金沸点是怎么发图片的一

203 阅读1分钟

插入截图

首先我使用微信截图功能截取了一张图在粘贴板中,然后在沸点的聊天框中,按下了Command/Ctrl + v

image.png

此时,可以看到在沸点的聊天框下展示了我粘贴板中的图片。

image.png

审查一下元素发现,创建了一个本地的图片blob。

这里可以分析得出,掘金读取了我系统的粘贴板中的图片,然后创建本地的图片blob并展示。

提交沸点

当我点击提交沸点时,使用post方式提交了哪些内容呢?

image.png

主要有这3个字段。pic_list是一个图片地址的列表,由于我只发了一张图,所以这个列表中只有一条数据。

看一下具体的这条数据:https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/7172a7e890ae4f52b0f55febfc72ba27~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=264&h=129&s=27299&e=png&b=ffffff

可以看到这已经是一张图片的url地址了,现在看一下这个地址是哪里返回的。

上传图片

image.png

image.png

image.png

可以看到往一个地址上使用put方式提交了图片。

拿到url地址

上一步虽然上传了图片但是返回的并非图片url。

image.png

image.png

image.png

通过POST方式提交接口去获取图片的地址信息。

其中提交的两个参数来源不清楚:SessionKeyServiceId

image.png

image.png

image.png

再次发交易,通过图片uri去获取cdn图片的url地址。

现在有两个问题:

  1. 现在返回的图片地址与发布时上送的图片地址有区别
    • https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/7172a7e890ae4f52b0f55febfc72ba27~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=264&h=129&s=27299&e=png&b=ffffff
    • https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/7172a7e890ae4f52b0f55febfc72ba27~tplv-k3u1fbpfcp-watermark.image?
  2. 获取图片信息接口上送的参数(SessionKeyServiceId)来源