作为一名又拍云的技术支持工程师,小拍每天都会接收到很多客户的提问。这其中,有很多客户会问:“小拍,请问云存储上传除了使用控制台的文件管理和 FTP 工具之外,有没有其他的途径进行上传呢?

“有哒,您可以调用 API 接口来进行上传哦。”

“请问,什么是 API 接口呢?我要怎么调用呢?”

别着急,这就为您介绍 API 接口。

什么是 API 接口

首先,我们先来看一看 API 接口的定义:

API(Application Programming Interface,应用程序编程接口)是一些预先定义的函数,目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力,而又无需访问源码,或理解内部工作机制的细节。

从定义中,我们先划下重点:函数、 提供应用程序与开发人员、无需访问源码、例程 其中,例程是某个系统对外提供的功能接口或服务的集合。

看完这个定义是不是感觉自己看了个寂寞,这解释跟不解释没有差别啊?好啦,不要担心,小拍来给大家直接了当的说一说。

API 其实可以理解为是接收要求的信差,通过 API 接口,我们告诉系统(例程)想要做什么,系统再把处理结果响应回来。

如果用一个现实生活中的场景来举例说明,那么餐厅的服务员其实就是一个典型的 API 。想象一下你正坐在餐桌前,面前桌子上有一张点菜用的菜单,点好菜后,交由厨房进行处理。但现在少了一个关键的链接点,如何把我们的单子送到厨房,再把食物送到我的桌上呢?

这就是服务员(API)登场的时候了。服务员就是这个信差,他会传递你的要求或者餐点,把这些信息告诉厨房(系统),厨房就会知道怎么做,然后把餐品通过服务员端(响应)给你。

现在我们把这个原理应用到真正的 API 例子上来。

快递单号查询,这大家应该很熟悉吧。朋友通过顺丰寄了一箱零食给你,并告知你了快递单号,你就可以在顺丰的官网上,输入快递单号进行查询。顺丰的系统接收到查询,就会在系统中查找对应快递的信息,响应给你。

但是,很多时候我们并不是直接通过快递公司的网站去查询快递信息的。比方说通过淘宝买的衣服,卖家通过顺丰发货,但我们可以在淘宝上查询到顺丰快递的信息。那么淘宝是怎么获取到存放在顺丰服务器上的快递数据呢?

没错,这里就是使用了 API 。淘宝可以通过顺丰提供的 API 接口,来获取存放在顺丰服务器上的快递信息,最后显示在我们面前。

1.png

现在再看上边的定义,是不是感觉好理解一些了呢?API 接口就是预先定义好的函数逻辑,提供给其他系统请求,然后返回结果的一个东西。

为什么要使用 API 接口

在知道了 API 接口的作用后,使用 API 接口的原因也就一目了然了。举个例子:你打算开发一个打车软件,需要在页面上展现地图,那你会怎么做呢?

如果说自己来开发地图,开发时间就会大大延长,成本也会增加许多。这个时候,其实可以在高德开放平台或者百度地图的开放平台,找到地图 API,购买他们的服务,部署调用相关的 API ,这样就可以快速在我们软件中上线地图功能了。

所以,对于软件提供商来说,开放 API 并让别的应用程序来调用,形成生态,软件才能发挥大的价值,才能更有生命力,同时别人也看不见代码,不会伤害商业机密。

对于应用开发者来说,有了开放的 API ,就可以直接调用多家公司做好的功能来做自己的应用,不需要所有的事情都自己操刀,节省精力。

如何使用 API 接口


现在市面上开放的 API 接口,一般都是通过 HTTP 请求调用的。例如,一些第三方提供的查询天气的功能,我们就可以根据第三方提供的 API 地址以及相关的说明文档,携带上请求参数,在浏览器中直接访问使用。

2.png

3.png

接下来,小拍以又拍云存储上传 API 为例,通过 curl 工具来完成一个向云存储上传文件的操作。接下来会涉及到一些命令行工具以及代码的操作,如果你对 curl 这个工具不太熟悉的话,也可以参考小拍之前的文章《双剑合璧-掌握 curl 和 Dig 走天涯》哦。

每个 API 接口根据作用不同,需要传递的参数也是不尽相同的。因此,我们在使用一个 API  接口之前,先看一下官方文档的 API 说明。

4.png

通过文档介绍,我们可以看到如果需要请求云存储的上传接口,我们需要使用 PUT 的方式,向 http://v0.api.upyun.com 发起请求。其中存储服务名和文件的保存路径定义在请求地址中。并且需要携带 Authorization 鉴权请求头,来确保 API 的调用是合法的。

Authorization 的生成,小拍使用简单的基本认证来进行演示。

根据鉴权文档介绍,curl 支持直接传入操作员名和密码来生成鉴权请求头。

5.png

了解 API 接口调用的规则之后,我们就可以开始准备数据,来向云存储空间上传文件啦。

例如,小拍的桌面上有一张图片,小拍想把图片上传到自己云存储空间下的 images 目录下,保存名为 lufei.jpg。

6.png

小拍的云存储空间名为 fileupload-upyun,操作员名为 hello,对应的密码为 dF4XhRbnpsvonU1dgdetURncHSwa2Z37,这样,我们就有调用上传 API 的必要参数了。

接下来,我们就按照要求,组装 curl 的请求命令。

    curl -X PUT \
    http://v0.api.upyun.com/fileupload-upyun/api/lufei.jpg \
    -u hello:dF4XhRbnpsvonU1dgdetURncHSwa2Z37 \
    -T C:\Users\hilih\Desktop\test.jpg


    参数说明:

    -X 可以指定 curl 发起请求的方法

    -u 对传入的数据进行 HTTP 基本认证,也就是用户和密码组和的base64编码

    -T 可以使 curl 读取指定路径下的文件

    7.png

    这样呢,我们就成功的调用了云存储的上传 API 接口,通过接口上传了一张本地的图片到存储空间中。

    8.png

    △ 通过云存储的测试域名对上传图片进行访问

    不过,使用 curl 发起 HTTP 请求,看上去总有一些麻烦,命令行也太反人类了吧,有没有更加友好的界面呢?当时啦,使用 curl 只是其中一种的上传方法,我们还可以通过其它方式,来向云存储 API 发起 HTTP 请求。

    例如二狗子的网站分享图片,二狗子就对上传的 API 做了处理,用网页的形式对他的用户提供了一个上传的 API 接口。小拍也联系了二狗子,请他提供了一个简单的测试用例。

    9.png

    网页代码:

      <!DOCTYPE html>
      <html>
      <head>
      <meta charset="utf-8">
      <title>云存储上传</title>
      <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.20.0/axios.min.js"></script>
      </head>
      <body>
      上传服务空间:<input id='bucketname'>
      操作员账号:<input id='username'>
      操作员密码:<input id='password'>
      存储路径:<input id='path'>
      文件选择:<input id='fileupload' type='file' name='file' /><br><br>
      <button>上传</button>
      <script type="text/javascript">
      window.onload = function() {
      document.querySelector('button').onclick = ufload;
      }
      function ufload() {
      var bucket = document.querySelector('#bucketname').value;
      var username = document.querySelector('#username').value;
      var password = document.querySelector('#password').value;
      var path = document.querySelector('#path').value;
      var input = document.querySelector('#fileupload');
      var file = input.files[0];
      axios.defaults.baseURL = 'http://v0.api.upyun.com';
      axios.put('/' + bucket + path, file, {
      auth: {
      username: username,
      password: password
      }
      }).then(function(response) {
      console.log(response.data);
      console.log(response.headers);
      console.log(response.status);
      if (response.status == 200) {
      alert('上传成功');
      }
      })
      }
      </script>
      </body>
      </html>

      也欢迎你使用熟悉的编程语言,来尝试调用 API 上传接口呀。