23 将图片上传到 sm.ms 图床

图床这个东西，是熟悉的人非常熟悉，陌生的人非常陌生。

简单来说，图床是一类服务的统称。这类服务主要做的事是：把你设备里的图片上传到图床服务中，然后这个服务给你返回一个链接，这个链接就是图片的下载链接。

虽然我们几乎每天都在接触这种服务——比如上传图片发微博和朋友圈实际上就是在干这个——可对于不经常写 Blog 的人来说，这是个没有必要熟悉的概念。

不过，如果想要玩转捷径的话，事情就有点不一样了。有一些实用性比较强的捷径，比如「以图搜图」和「OCR 图片内容识别」等，它们的基础就是图床类捷径。所以为了制作这些高水平捷径，还是要先把基础打牢。

那么接下来，我们就看看如何制作一个图床捷径，可以让我们把图片变成链接。

捷径效果演示

重理思路

《Week 12：API 捷径基础实例（必读）》里总结了我们在捷径中使用 API 的套路和步骤：

1. 查阅文档，找到获取所需的 JSON 的链接
2. 根据链接获取 JSON
3. 找到 JSON 里找自己想要的那个值对应的名称
4. 最后按照层级，获取那个名称中的值

我们按照这个步骤，来看看能不能做一个可用的图床捷径。

第一步，查阅文档

sm.ms 是最适合在此作为捷径中使用 API 入门的服务，原因之一就是它的 API 文档公开且写得非常简单。

这是它的文档页：

可能看到这个页面你还是会觉得复杂，但和我们之后可能会打交道的文档页相比这真的是非常友好的界面了。

另外必须要牢记的一点是，我们在使用捷径的时候，并不需要熟悉整个文档，而是只要把我们用得上的部分给找到就行。

在使用 sm.ms 这个服务时，我们只需要知道图片上标记的这 3 个信息：

1. 请求方式：文档中写的是「POST」
2. URL：文档中写的是 https://sm.ms/api/upload
3. 必填参数：必填参数要注意两项。一是「参数名称」，文档里要求的是 smfile；二是「类型」，文档里要求的是 File

只要把这些信息填到捷径里，我们就能利用 sm.ms 这个服务做出一个图床捷径。实际上，你完全可以说，你做了一个图床小程序，尽管你我都知道，你此前不会编程。

第二步，使用捷径获取 JSON 文件

接下来的每一步对于新手都很重要，最好每一步都动手自己制作。

回想一下我们刚才要求知道的 3 个信息，它们分别是：

1. 请求方式：「POST」
2. URL：https://sm.ms/api/upload
3. 必填参数：必填参数重要注意的有两项。一是「参数名称」，文档里要求的是 smfile；二是「类型」，文档里要求的是 File

首先，我们要用的是 3 个信息里的 URL。我们要把它放进捷径中「URL」这个操作里：

这是因为我们在使用 API 的时候，我们其实是在向一个服务指定的 URL 请求 JSON 文件。这就是说我们要用某个服务的 API 的时候，这个 URL 必不可少。

随后，当我们知道 URL 是什么，我们要知道这个服务要求我们向这个 URL 请求的方式是什么。这就是我们掌握的 3 个信息中的另一个——请求方式。sm.ms 这个服务要求的请求方式是「POST」，在捷径里，我们要用「获取 URL 内容」：

当我们仅仅是放上去一个「获取 URL 内容」时，它默认的请求方式是「GET」，而因为我们需要换成「POST」，所以就要点操作里的「高级（Advanced）」，把「方法（Method）」给改为「POST」：

接着，我们只搞定请求方式还不够，我们还要把请求时必要的参数给填写完整。这就是我们掌握的 3 个信息中的最后一个——必填参数。

sm.ms 这个服务的必填参数要注意的有两项：

1. 参数名称：文档里要求的是 smfile
2. 类型：文档里要求的是 File

它们在捷径中对应的位置和形式是什么呢？答案还是在「获取 URL 内容」这个操作中：在请求体（Body）这一项，我们要选择表单，再「添加“新字段”」。「添加“新字段”」时我们要选择「文件」，因为 sm.ms 的文档里要求的参数类型是 File：

选择「文件」后会弹出一行表格，左边是「键（Key）」，右边是「选取变量（Choose Variable）」。这个「键」，我们要填的就是「参数名称」，也就是 sm.ms 要求的 smfile，而「选取变量」里就是我们要上传的图片的变量。

是不是绕了这么远，大家已经忘了我们要干啥了。没错我们其实是要做个图床，所以我们肯定有一个步骤，是和图片有关的。而这一步就是那个和图片有关的步骤。

不过我们会发现这里只能填写变量，不能直接放一个「选择图片」的操作，这怎么办？

相信这个问题已经难不倒各位了，我们只要在此之前先把要上传的图片给获取到，然后为它设一个变量即可：

至此为止，一切准备就绪，我们来运行一下捷径，看看能不能成功地获取到一个 JSON 文件：

Done！我们看到了那个乱七八糟乱麻一样的结果。

注：sm.ms 不支持上传 iPhone 直接拍摄的 HEIC 格式照片，需用「转换图像」操作转换为 JPG 等格式。

第三步，从 JSON 文件中找到需要的值

获取到了 JSON 文件后，我们就要来找我们要的结果了。先把刚才的天书通过 JSONFormatter 美化一下：

我们需要的是刚才上传的图片所返回的链接，也就是它的 URL。在结果中它很明显我们很轻松地就在结果中找到了「url」，那么现在问题就是怎么把它提取出来。

第四步，在捷径中提取我们需要的值

在捷径中处理 JSON，我们需要的操作是「获取词典值」：

你可能会对「词典」这个叫法感到很不自在，但实际上我们在《专栏：捷径中的列表、词典与菜单的主要区别》里就介绍过词典这种形式。

JSON 的文件，如果我们仔细看的话，它就是词典的形式。词典一般都是由冒号分开，左边是单词右边是释义。JSON 的文件也是用冒号分开，左边是名称，或者被叫做键（Key），而右边是它的值（Value）。

所以使用「获取词典值」这个操作的思路也很明白了，我们想要哪个「键」的值，我们就填哪个「键」，随后它自然会把这个「键」的值返回给我们。

在图床这个捷径里，我们想要的是 url 这个「键」的值，而它在 data 这个「键」的层级之下，我们要一层一层获取。所以这里需要两个「获取词典值」，第一个里面填 data，第二个里面填 url：

运行后发现，结果果然是我们想要的链接。

那么至此，我们的图床捷径也就完成了。你可以继续处理这个链接，比如把它复制到剪切板，又比如把它套上 Markdown 的图片链接格式方便写文章时使用，也可以把这一步作为更大的捷径的一部分……

小结

相信各位从小到大都因为各种各样的理由填写过不少表格。我们按照要求填写各种信息，随后把申请表格寄出去等待审核，审核通过后对方会返还给我们那个我们期待的东西。

在捷径中使用 API 的过程和这个过程一样。我们按照要求填写表格，提交申请，服务审核通过后返回给我们一个 JSON 文件。

这就要求我们把所有必填的项目，以及要求的形式都确定好，再进行填写和提交。而这些就是在捷径中使用 API 要注意的所有细节。

在捷径中使用 API 的操作只有 3 个左右，最费功夫的部分在于读文档，也就是搞清楚自己为了请求自己想要的那个 JSON，到底要提交什么信息，以什么形式提交。知道了这些，在捷径中使用 API 就不在话下。