前言:

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

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

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

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

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

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

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

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

如果你还没阿里云账号的话,可以先去注册一个账号,然后再从首页的左侧菜单树中找到对象存储OSS服务,点击并根据提示开通服务后,自动跳转到控制台。

oss

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

oss

至此,你的第一个存储空间就创建完成了。(此外,根据存储方式的不同,收费也不一样,这需要根据收费标准及自身需求做决定。)


2. 图片上传及处理

2.1 图片上传

选择你的bucket =》点击文件管理 =》点击新建目录(自定义创建,便于分类) =》进入目录并点击上传文件

oss

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

oss

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

oss

2.2 图片处理

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

在OSS管理控制台的图片处理页面,可以按自己的需要来新建样式,其实它就是一套描述图片处理方式的规则配置。

oss

点击新建样式弹出以下配置界面:

oss

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

如果觉得后缀的参数有点长,则可以点击访问设置再配置一下自定义分隔符,简化url后缀参数(不建议使用此法,可能在一些场景出现图片展示不全的情况):

oss

原图保护

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

oss

可正常访问的url规则:

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