前言:

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

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

  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后缀参数(不建议使用此法,可能在一些场景出现图片展示不全的情况):

原图保护

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

可正常访问的url规则:

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

[sleepy↓]

使用oss来存取及优化图片资源的更多相关文章

  1. gcc都做了什么优化

    直接上程序: setjmp和longjmp是处理函数嵌套调用的,goto语句不能跨越函数,所以不选择goto. #include <setjmp.h> int setjmp(jmp_buf ...

  2. Creator性能优化

    性能优化主要这几个方面进行优化:加载优化,渲染优化,内存优化,CPU优化及一些小技巧. 加载优化 图片资源处理:巧用九宫格拉伸来实现资源得复用,如大的纯色背景图,完全可以使用一张小图来进行拉伸获得: ...

  3. 【译文】使用webpack提高网页性能优化

    这篇文章原文来自https://developers.google.com/web/fundamentals/performance/webpack/. 说是译文其实更像是笔者做的笔记,如有错误之处请 ...

  4. 【Alpha】Daily Scrum Meeting第五次

    一.本次Daily Scrum Meeting主要内容 每个人学习情况 任务安排 界面设计问题,怎样让界面更好看? 二.任务安排 学号尾数 昨天做的任务 今天的任务 明天的任务 612 时间轴控件优化 ...

  5. (转)对《30个提高Web程序执行效率的好经验》的理解

    阅读了博客园发布的IT文章<30个提高Web程序执行效率的好经验>,这30条准则对我们web开发是非常有用的,不过大家可能对其中的一些准则是知其然而不知其所以然. 下面是我对这些准则的理解 ...

  6. 【Xamarin挖墙脚系列:应用的性能调优】

    原文:[Xamarin挖墙脚系列:应用的性能调优] 官方提供的工具:网盘地址:http://pan.baidu.com/s/1pKgrsrp 官方下载地址:https://download.xamar ...

  7. 解读30个提高Web程序执行效率的好经验

    其实微博是个好东西,关注一些技术博主之后,你不用再逛好多论坛了,因为一些很好的文章微博会告诉你,最近看到酷勤网推荐的一篇文章<30个提高Web程序执行效率的好经验>,文章写得不错,提到一些 ...

  8. 通过用jQuery写一个页面,我学到了什么

    概述 前几天面试,hr发来一个测试文件,让我做做看.我一看,其实就是根据PSD需求写一个页面,再加上一些互动效果即可. 刚好我之前学了切图,jquery等知识还没练手过,于是高兴的答应了. 最后花了3 ...

  9. mipsel汇编指令学习

    MIPS汇编语言基础 MIPS的系统结构及设计理念比较先进,其指令系统经过通用处理器指令体系MIPS I.MIPS II.MIPS III.MIPS IV.MIPS V,以及嵌入式指令体系MIPS16 ...

随机推荐

  1. Python将PDF转为TXT

    PDFMiner----python的PDF解析器和分析器 1.官方文档:http://www.unixuser.org/~euske/python/pdfminer/index.html 2.特征 ...

  2. Vue的基本使用和模版语法

    Vue的基本使用和模版语法 一.Vue概述 Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架 vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目 ...

  3. 面阿里P7,竟问这么简单的题目?

    关于作者:程序猿石头(ID: tangleithu),来自十八县贫困农村(查看我的逆袭之路),BAT某厂P7,是前大疆(无人机)技术主管,曾经也在创业公司待过,有着丰富的经验. 本文首发于微信公众号, ...

  4. 情景剧:C/C++中的未定义行为(undefined behavior)

    写在前面 本文尝试以情景剧的方式,轻松.直观地解释C/C++中未定义行为(undefined behavior)的概念.设计动机.优缺点等内容1,希望读者能够通过阅读本文,对undefined beh ...

  5. Cuda Stream流分析

    Cuda Stream流分析 Stream 一般来说,cuda c并行性表现在下面两个层面上: Kernel level Grid level Stream和event简介 Cuda stream是指 ...

  6. 从C到C++过渡的3个原因

    从C到C++过渡的3个原因 3 reasons to transition from C to C++ 几十年来,嵌入式软件工程师们一直在争论他们是否应该使用C或C++.根据2019年嵌入式市场调查, ...

  7. Anno微服务Viper(控制面板) 支持在线部署

    1.Anno简介? Anno是一个微服务框架引擎.入门简单.安全.稳定.高可用.全平台可监控.依赖第三方框架少.可在线升级部署. 2.Viper简介 Viper 是一个基于Anno微服务引擎开发的Da ...

  8. java并发编程JUC第十二篇:AtomicInteger原子整型

    AtomicInteger 类底层存储一个int值,并提供方法对该int值进行原子操作.AtomicInteger 作为java.util.concurrent.atomic包的一部分,从Java 1 ...

  9. Oracle不知道用户密码情况下,如何在不更改密码的前提下解锁用户或者延期密码有效期

    1.问题描述: 生产环境,zabbix告警业务用户密码即将过期,但是如何不知道业务用户密码的情况下来解决该问题? 2.实验一: 1)创建新的用户test,并授予test resource角色和conn ...

  10. 10、Jenkins配置

    10.0.服务器说明: 服务器名称 ip地址 slave-node1 172.16.1.91 10.1.持续集成: 1.什么是持续集成: 持续集成是一种软件开发时实践,即团队开发成员经常集成他们的工作 ...