如何使用云存储来存取及优化图片资源

96
一斤代码 11f8cfa8 ec9f 4f82 be92 d6a39f61b5c1
0.1 2018.09.05 23:53* 字数 2392

在日常开发中,不免会遇到需要实现图片上传与展示的需求。比如一个文章发布系统,我们通常会开发图片上传功能,让用户可以为自己的文章提供配图;而且图片上传后,还需要生成不同尺寸的缩略图,供文章列表等不同场景界面展示用。

做过类似功能的朋友肯定熟悉传统的做法:

  1. 首先,通过文件上传组件将图片文件通过POST请求发送到服务器端
  2. 然后,当服务器端接受到上传的图片数据后,写入本地磁盘或分布式文件系统,将图片文件保存在特定文件夹中
  3. 接着,服务端在将图片原图保存成文件的同时,调用图片处理服务(例如ImageMagic)对原图进行裁剪、压缩等处理,生成需要的缩略图文件,和原图一并保存
  4. 最后,将原图和缩略图的文件路径信息保存在数据库中,供后续展示之用

这套典型的图片上传处理流程,是作为一个合格的开发者所必须了解的必备基础知识。但是,在这一系列环节中,我们可能需要自己配置搭建高可用的文件系统,编写各种图片处理代码,还是颇费时间的。在如今讲究开发效率、快速开发产品原型、快速迭代的理念和环境下,如何利用现成服务来实现产品的功能并缩短开发周期,也是一个很有价值的事情,而且选用一个质量比较好的现成服务,可能比你自己开发一个类似功能要来得更加稳定,这也能间接的提升你产品的用户体验。

针对前面提到的这块图片上传处理功能,其实有很多云平台提供了方便的文件存储和图片处理服务,比如阿里云的OSS、腾讯云的COS、七牛云存储等等。而且这类云存储的价格也比较便宜,可以单独购买使用,也可以搭配云主机等搭建整体服务上云方案。

下面我就基于我自己使用阿里云OSS的经验,来介绍一下主要的开发使用流程。阿里云OSS(即Object Storage Service,对象存储服务)提供基于网络的数据存取服务,可以通过网络随时存储和调用包括文本、图片、音频和视频等在内的各种非结构化数据文件,它将数据文件以对象的形式上传到存储空间中。我们可以对其进行以下几类操作:

  • 创建一个或者多个存储空间,向每个存储空间中添加一个或多个文件
  • 通过获取已上传文件的地址进行文件的分享和下载
  • 通过修改存储空间或文件的属性或元信息来设置相应的访问权限
  • 在阿里云管理控制台执行基本和高级OSS任务
  • 使用阿里云开发工具包或直接在应用程序中进行RESTful API调用执行基本和高级OSS任务

当然,如果你使用的是别的云存储服务,也可以作为参考,因为它们的理念和使用方法都是非常接近的。

开通阿里云OSS,并创建存储空间

如果你还没阿里云账号的话,可以先去注册一个账号,然后登录后进入“控制台”,再从左侧菜单树中找到“对象存储OSS”服务并点击进入服务主页:

进入OSS管理控制台主页后,你需要先创建一个“存储空间”,这个存储空间相当于是你在阿里云OSS上的专属磁盘空间。在创建时,指定存储类型为“标准存储”,读写权限为“公共读”:

存储空间创建完成后,你就可以通过“文件管理”页面开始上传文件到该存储空间了,我在这里上传了一张尺寸为1920x1080的测试用大图片:

点击文件名,可以获取到上传的文件的可访问URL路径,在你的网页或app应用中可以直接使用该URL路径来访问这些文件。

图片处理

能方便的进行批量图片文件处理,是我们使用云存储服务的一个重要原因。阿里云OSS提供了比较丰富的图片处理功能,比如图像裁剪、缩放、转格式、加水印、调整图片质量等等。在OSS管理控制台的“图片处理”页面,可以按自己的需要来创建“图片处理样式”,其实它就是一套描述图片处理方式的规则配置。

下图的示例创建了一个可根据原图生成等比例缩放的缩略图样式:

创建完的这个样式名称为thumb。然后我们怎么来使用它呢?非常简单,只需要在访问原图的URL后面加上特定的参数即可:

如果觉得后缀的参数有点长,则可以再配置一下自定义分隔符,这样就可以起到简化参数的效果了:

使用代码的方式将文件上传到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: 'xxxx',  //你的存储空间名
    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://xxxx.oss-cn-xxxx.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的文档尝试更多的操作。

你可以将上面所述的代码集成进你的实际业务代码中,通过这种方式,可以很容易的将传统流程下上传图片后的文件存储环节、图片加工处理环节都转到云存储服务上来。

【省钱小能手】
1. 阿里云通用代金券:最高1888元,云产品通用红包,可叠加官网常规优惠使用
2. 阿里云基础版服务器优惠套餐:1核1G仅需293元/年
3. 阿里云高性能服务器优惠套餐:首次购买企业级云服务器5折

从编程小白到全栈开发
3.8万字 · 2.9万阅读 · 282人关注