使用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↓]