如何使用云存储来存取及优化图片资源
在日常开发中，不免会遇到需要实现图片上传与展示的需求。比如一个文章发布系统，我们通常会开发图片上传功能，让用户可以为自己的文章提供配图；而且图片上传后，还需要生成不同尺寸的缩略图，供文章列表等不同场景界面展示用。
做过类似功能的朋友肯定熟悉传统的做法：
- 首先，通过文件上传组件将图片文件通过POST请求发送到服务器端
- 然后，当服务器端接受到上传的图片数据后，写入本地磁盘或分布式文件系统，将图片文件保存在特定文件夹中
- 接着，服务端在将图片原图保存成文件的同时，调用图片处理服务（例如ImageMagic）对原图进行裁剪、压缩等处理，生成需要的缩略图文件，和原图一并保存
- 最后，将原图和缩略图的文件路径信息保存在数据库中，供后续展示之用
这套典型的图片上传处理流程，是作为一个合格的开发者所必须了解的必备基础知识。但是，在这一系列环节中，我们可能需要自己配置搭建高可用的文件系统，编写各种图片处理代码，还是颇费时间的。在如今讲究开发效率、快速开发产品原型、快速迭代的理念和环境下，如何利用现成服务来实现产品的功能并缩短开发周期，也是一个很有价值的事情，而且选用一个质量比较好的现成服务，可能比你自己开发一个类似功能要来得更加稳定，这也能间接的提升你产品的用户体验。
针对前面提到的这块图片上传处理功能，其实有很多云平台提供了方便的文件存储和图片处理服务，比如阿里云的OSS、腾讯云的COS、七牛云存储等等。而且这类云存储的价格也比较便宜，可以单独购买使用，也可以搭配云主机等搭建整体服务上云方案。
下面我就基于我自己使用阿里云OSS的经验，来介绍一下主要的开发使用流程。阿里云OSS（即Object Storage Service，对象存储服务）提供基于网络的数据存取服务，可以通过网络随时存储和调用包括文本、图片、音频和视频等在内的各种非结构化数据文件，它将数据文件以对象的形式上传到存储空间中。我们可以对其进行以下几类操作：
- 创建一个或者多个存储空间，向每个存储空间中添加一个或多个文件
- 通过获取已上传文件的地址进行文件的分享和下载
- 通过修改存储空间或文件的属性或元信息来设置相应的访问权限
- 在阿里云管理控制台执行基本和高级OSS任务
- 使用阿里云开发工具包或直接在应用程序中进行RESTful API调用执行基本和高级OSS任务
当然，如果你使用的是别的云存储服务，也可以作为参考，因为它们的理念和使用方法都是非常接近的。
开通阿里云OSS，并创建存储空间
如果你还没阿里云账号的话，可以先去注册一个账号，然后登录后进入“控制台”，再从左侧菜单树中找到“对象存储OSS”服务并点击进入服务主页：
进入OSS管理控制台主页后，你需要先创建一个“存储空间”，这个存储空间相当于是你在阿里云OSS上的专属磁盘空间。在创建时，指定存储类型为“标准存储”，读写权限为“公共读”：
存储空间创建完成后，你就可以通过“文件管理”页面开始上传文件到该存储空间了，我在这里上传了一张尺寸为1920x1080的测试用大图片：
点击文件名，可以获取到上传的文件的可访问URL路径，在你的网页或app应用中可以直接使用该URL路径来访问这些文件。
图片处理
能方便的进行批量图片文件处理，是我们使用云存储服务的一个重要原因。阿里云OSS提供了比较丰富的图片处理功能，比如图像裁剪、缩放、转格式、加水印、调整图片质量等等。在OSS管理控制台的“图片处理”页面，可以按自己的需要来创建“图片处理样式”，其实它就是一套描述图片处理方式的规则配置。
下图的示例创建了一个可根据原图生成等比例缩放的缩略图样式：
创建完的这个样式名称为thumb。然后我们怎么来使用它呢？非常简单，只需要在访问原图的URL后面加上特定的参数即可：
-
原图URL：
https://md-bucket.oss-cn-beijing.aliyuncs.com/bg1.jpg -
使用了图片样式thumb的URL：
https://md-bucket.oss-cn-beijing.aliyuncs.com/bg1.jpg?x-oss-process=style/thumb
如果觉得后缀的参数有点长，则可以再配置一下自定义分隔符，这样就可以起到简化参数的效果了：
- 配置完成后，就可以通过简化的参数进行访问：
https://md-bucket.oss-cn-beijing.aliyuncs.com/bg1.jpg!thumb
使用代码的方式将文件上传到OSS
在实际开发中，我们肯定不会手动的通过阿里云的管理页面来管理文件（上传、移动、删除等），而是希望能通过我们的代码中去控制文件的存储。阿里云OSS或其他云存储服务都提供了相应的API接口或SDK来让我们方便实现从代码中去管理文件，阿里云OSS提供了各种语言实现的SDK，具体可以查看官方文档页面。
继续，如果要从代码中操作OSS的话，先要申请一个Access Key。在OSS概览页面的右边，有个"Access Key"按钮，点击进入，会提示选择“继续使用AccessKey”或“开始使用子用户AccessKey”，前者的权限非常高，一旦泄露比较麻烦；后者比较安全可控，所以推荐使用子用户AccessKey。
选择“开始使用子用户AccessKey”后，你可以建立一个子账户，并设置这个子账户的权限为“ AliyunOSSFullAccess”，操作成功后，会得到AccessKeyID和AccessKeySecret，这会在后面的代码中用来获取OSS授权。
下面，我将使用Node.js来编写示例代码，对我的OSS进行远程操作。
创建一个index.js文件，并使用npm安装Node.js版本的SDK：
npm install ali-oss
然后在index.js文件中引入SDK，并创建一个连接OSS的客户端：
const OSS = require('ali-oss')
// 创建连接OSS的客户端
const client = new OSS({
region: 'oss-cn-beijing', //你的OSS存储空间所在的地域
bucket: 'md-bucket', //你的存储空间名
accessKeyId: 'xxxxx', //你的AccessKeyID
accessKeySecret: 'xxxxxx' //你的AccessKeySecret
})
这样，就可以建立起和存储空间的连接。接下来，我们可以调用方法来查看存储空间中的文件列表：
async function list() {
try {
const result = await client.list()
console.log(result.objects)
} catch (err) {
consol.log(err)
}
}
list()
执行这段代码，可以看到我之前上传到存储空间中的图片文件信息，如下所示：
[ { name: 'bg1.jpg',
url: 'http://md-bucket.oss-cn-beijing.aliyuncs.com/bg1.jpg',
lastModified: '2018-09-03T05:34:49.000Z',
etag: '"0D20792E78751C720D5D6D8536338AE7"',
type: 'Normal',
size: 1320095,
storageClass: 'Standard',
owner: { id: '1266547436400858', displayName: '1266547436400858' }
} ]
接下来，我们再往存储空间中上传一些文件：
async function put() {
try {
//上传本地相对路径resources目录下的building.jpg到远程存储空间根目录
await client.put('building.jpg', './resources/building.jpg')
//上传本地相对路径resources目录下的test1.xlsx到远程存储空间documents目录下
await client.put('/documents/test1.xlsx', './resources/test1.xlsx')
} catch (err) {
consol.log(err)
}
}
put()
运行成功后，你可以去阿里云的OSS管理界面中查看，可以看到通过代码上传的文件，都已经按照设想的样子存放在了存储空间中：
当然了，通过代码上传的图片也就可以通过添加“图片样式”参数来进行经过图片处理后的访问。
是不是很简单方便？其实通过SDK还可以做很多的事情，几乎管理页面上能做的操作都能通过SDK来进行，感兴趣的话，可以根据Ali-OSS SDK的文档尝试更多的操作。
你可以将上面所述的代码集成进你的实际业务代码中，通过这种方式，可以很容易的将传统流程下上传图片后的文件存储环节、图片加工处理环节都转到云存储服务上来。
省钱小能手
如果你打算购买OSS的套餐或者其他阿里云服务，可以先领取下面的代金券再进行购买，比较实惠。
https://promotion.aliyun.com/ntms/yunparter/invite.html?userCode=hyn5a9ql
