使用oss来存取及优化图片资源

目录

• 1. 开通阿里云OSS，并建立存储空间
• 2. 图片上传及处理
  • 2.1 图片上传
  • 2.2 图片处理

---

前言：
在平常开发中，难免会遇到须要实现图片上传与展现的需求。好比一个文章发布系统，咱们一般会开发图片上传功能，让用户能够为本身的文章提供配图；并且图片上传后，还须要生成不一样尺寸的缩略图，供文章列表等不一样场景界面展现用。

作过相似功能的朋友确定熟悉传统的作法：

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

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

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

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

• 建立一个或者多个存储空间，向每一个存储空间中添加一个或多个文件
• 经过获取已上传文件的地址进行文件的分享和下载
• 经过修改存储空间或文件的属性或元信息来设置相应的访问权限
• 在阿里云管理控制台执行基本和高级OSS任务
• 使用阿里云开发工具包或直接在应用程序中进行RESTful API调用执行基本和高级OSS任务
• 固然，若是你使用的是别的云存储服务，也能够做为参考，由于它们的理念和使用方法都是很是接近的。

---

1. 开通阿里云OSS，并建立存储空间

若是你还没阿里云帐号的话，能够先去注册一个帐号，而后再从首页的左侧菜单树中找到对象存储OSS服务，点击并根据提示开通服务后，自动跳转到控制台。

进入OSS管理控制台，你须要先建立一个Bucket，这个存储空间至关因而你在阿里云OSS上的专属磁盘空间。在建立时，指定存储类型为标准存储，读写权限为公共读：

至此，你的第一个存储空间就建立完成了。（此外，根据存储方式的不一样，收费也不同，这须要根据收费标准及自身需求作决定。）

---

2. 图片上传及处理

2.1 图片上传

选择你的bucket =》点击文件管理 =》点击新建目录（自定义建立，便于分类） =》进入目录并点击上传文件

如图所示， 我在新建”md/“目录下上传了一个文件-”头像.jpg“

点击文件详情，能够获取到上传的文件的可访问URL路径，在你的网页或app应用中能够直接使用该URL路径来访问这些文件，可是出于安全和其余自定义需求的考虑，最好进行图片处理。

2.2 图片处理

能方便的进行批量图片文件处理，是咱们使用云存储服务的一个重要缘由。
阿里云OSS提供了比较丰富的图片处理功能，好比图像裁剪、缩放、转格式、加水印、调整图片质量等等。

在OSS管理控制台的图片处理页面，能够按本身的须要来新建样式`，其实它就是一套描述图片处理方式的规则配置。

点击新建样式弹出如下配置界面：

建立完的这个样式名称为watermark。而后咱们怎么来使用它呢？很是简单，只须要在访问原图的URL后面加上特定的参数便可：

• 原图url
  https://mrgao.oss-cn-beijing.aliyuncs.com/md/%E5%A4%B4%E5%83%8F.jpg

• 使用了图片样式watermark的URL：
  https://mrgao.oss-cn-beijing.aliyuncs.com/md/%E5%A4%B4%E5%83%8F.jpg?x-oss-process=style/watermark

若是以为后缀的参数有点长，则能够点击访问设置再配置一下自定义分隔符，简化url后缀参数（不建议使用此法，可能在一些场景出现图片展现不全的状况）：

• 配置访问设置后：
  https://mrgao.oss-cn-beijing.aliyuncs.com/md/%E5%A4%B4%E5%83%8F.jpg!watermark

原图保护：
开启原图包含后，存储在bucket中的源文件是不能被直接访问的，只能经过传入 stylename 和带签名的方式访问；将禁止直接访问 OSS 原文件或传入图片参数修改图片样式的访问。

可正常访问的url规则：

• 默认规则：域名/sample.jpg?x-oss-process=style/stylename
• 自定义规则：域名/sample.jpg自定义分隔符stylename

  [sleepy↓]