前言：
在日常開發中，不免會遇到需要實現圖片上傳與展示的需求。比如一個文章發布系統，我們通常會開發圖片上傳功能，讓用戶可以為自己的文章提供配圖；而且圖片上傳后，還需要生成不同尺寸的縮略圖，供文章列表等不同場景界面展示用。
做過類似功能的朋友肯定熟悉傳統的做法：
- 首先，通過文件上傳組件將圖片文件通過POST請求發送到服務器端
- 然后，當服務器端接受到上傳的圖片數據后，寫入本地磁盤或分布式文件系統，將圖片文件保存在特定文件夾中
- 接着，服務端在將圖片原圖保存成文件的同時，調用圖片處理服務（例如ImageMagic）對原圖進行裁剪、壓縮等處理，生成需要的縮略圖文件，和原圖一並保存
- 最后，將原圖和縮略圖的文件路徑信息保存在數據庫中，供后續展示之用
這套典型的圖片上傳處理流程，是作為一個合格的開發者所必須了解的必備基礎知識。但是，在這一系列環節中，我們可能需要自己配置搭建高可用的文件系統，編寫各種圖片處理代碼，還是頗費時間的。在如今講究開發效率、快速開發產品原型、快速迭代的理念和環境下，如何利用現成服務來實現產品的功能並縮短開發周期，也是一個很有價值的事情，而且選用一個質量比較好的現成服務，可能比你自己開發一個類似功能要來得更加穩定，這也能間接的提升你產品的用戶體驗。
針對前面提到的這塊圖片上傳處理功能，其實有很多雲平台提供了方便的文件存儲和圖片處理服務，比如阿里雲的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后面加上特定的參數即可：
-
使用了圖片樣式
watermark的URL：
https://mrgao.oss-cn-beijing.aliyuncs.com/md/頭像.jpg?x-oss-process=style/watermark
如果覺得后綴的參數有點長，則可以點擊訪問設置再配置一下自定義分隔符，簡化url后綴參數（不建議使用此法，可能在一些場景出現圖片展示不全的情況）：
原圖保護：
開啟原圖包含后，存儲在bucket中的源文件是不能被直接訪問的，只能通過傳入 stylename 和帶簽名的方式訪問；將禁止直接訪問 OSS 原文件或傳入圖片參數修改圖片樣式的訪問。
可正常訪問的url規則：
- 默認規則：域名/sample.jpg?x-oss-process=style/stylename
- 自定義規則：域名/sample.jpg自定義分隔符stylename
[sleepy↓]