目录

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

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

  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

 
[sleepy↓]

 
 

版权声明：本文为sunhongleibibi原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://www.cnblogs.com/sunhongleibibi/p/11661303.html