上傳、預覽、下載下傳圖檔是app常用的功能之一，一般的做法是建立一個圖檔存儲伺服器，再開發一個接收前端上傳檔案的後端服務，接收到前端上傳的圖檔檔案，然後再調用存儲伺服器的接口完成圖檔檔案的存儲。
現在阿裡雲提供了對象存儲雲服務(OSS)，非常友善APP直接将圖檔等檔案上傳上去，并提供了多種浏覽、下載下傳的方式，不僅操作簡單、而且效率高、速度快，本文介紹三種使用方式，希望能夠讓工程師少走彎路。
傳統模式
這種方式隻是把OSS作為檔案存儲體替代了自建存儲器，上傳邏輯和路徑還是和傳統的方式一緻，後端服務給前端提供上傳接口，在收到前端上傳的檔案後，再調用阿裡雲的OSS SDK的API将檔案上傳到阿裡雲的OSS存儲桶中。
上傳流程
詳細說明及相關代碼請參考《雲平台對象存儲OSS》
直接表單方式
這種方式更加的便捷、快速，無需開發接收後端服務，而是前端直接将檔案上傳到OSS，這種方式就要求前端按照約定的參數通路OSS API，為了安全起見要按照阿裡雲SDK的方式生成相應的簽名并提供給前端。
FORM表單直接上傳流程
這裡要求提前生成簽名串，生成算法如下：
package aliyun;import aliyun.pojo.ResultData;import aliyun.pojo.SignatureData;import com.alibaba.fastjson.JSONObject;import org.apache.commons.codec.binary.Base64;public class Controller { private final static String POLICY="{"expiration":"2025-12-31T23:59:59Z","conditions":[["content-length-range",0,104857600]]}"; private String accessKeySecret = System.getenv("ACCESS_SECRET_CODE"); public String signatureCode(int times) throws Exception { ResultData resultData=new ResultData(); //限制規則 String encodePolicy = new String(Base64.encodeBase64(POLICY.getBytes())); // 生成簽名。 String signatureCom = com.aliyun.oss.common.auth.ServiceSignature.create().computeSignature(accessKeySecret, encodePolicy); SignatureData signatureData=new SignatureData(encodePolicy,signatureCom); resultData.setData(signatureData); return JSONObject.toJSONString(resultData); }}
其中：POLICY定義了上傳有效時間和檔案大小限制，簽名要用到阿裡雲賬号的Access Key Secret。這裡的簽名是有時效性的，有效期内不會改變，如果對安全要求很高，可以将該簽名過程作為服務釋出，讓前端每次在上傳的時候調用服務擷取實時的簽名資料。
前端form表單的構成如下：
阿裡雲AccessKeyID：
限制規則base64：
限制規則簽名：
OSS存儲檔案名：
選擇上傳檔案：
其中：action是你賬号下OSS存儲桶的endpoint URL，OSSAccessKeyId是你賬号下的AccessKey ID，policy是對上傳規則限制的base64編碼(這裡千萬不能直接使用你定義的policy字元串，而是該字元串的位元組碼的base64編碼後的結果，即由上面的計算結果提供)，Signature就是對policy的簽名結果，key是存儲到你指定bucket的目錄和檔案名。
ajax方式
通過這種方式可以不重新整理頁面完成檔案直接上傳到OSS，建議采用plupload.js插件實作。
OSS web直傳
OSS web直傳---直接在JS簽名
OSS web直傳---直接在JS簽名
基于plupload封裝 支援html5,flash,silverlight,html4 等協定上傳可以運作在PC浏覽器，手機浏覽器，微信可以選擇多檔案上傳顯示上傳進度條可以控制上傳檔案的大小最關鍵的是，讓你10分鐘之内就能移植到你的系統，實作以上牛逼的功能！注意一點，bucket必須設定了Cors(Post打勾),不然沒有辦法上傳注意一點，把upload.js 裡面的host/accessid/accesskey改成您上傳所需要的資訊即可此方法是直接在前端簽名，有accessid/accesskey洩漏的風險, 線上生産請使用後端簽名例子點選檢視詳細文檔
上傳檔案名字保持本地檔案名字 上傳檔案名字是随機檔案名
上傳到指定目錄:
您所選擇的檔案清單：
您所選擇的檔案清單：
你的浏覽器不支援flash,Silverlight或者HTML5！
選擇檔案開始上傳
upload.js代碼如下：
host = 'http://mybucket.oss-cn-beijing.aliyuncs.com';accessid= 'LTAI8N***mXX8cr';signature = "pgxE8V******Wz1jKv7cQV7uBE=";policyBase64 = "eyJleHBpcmF0aW9uIjoiMjAyNS0xMi0zMVQyMzo1OTo1OVoiLCJjb25kaXRpb25zIjpbWyJjb250ZW50LWxlbmd0aC1yYW5nZSIsMCwxMDQ4NTc2MDBdXX0=";g_dirname = ''g_object_name = ''g_object_name_type = ''now = timestamp = Date.parse(new Date()) / 1000; function check_object_radio() { var tt = document.getElementsByName('myradio'); for (var i = 0; i < tt.length ; i++ ) { if(tt[i].checked) { g_object_name_type = tt[i].value; break; } }}function get_dirname(){ dir = document.getElementById("dirname").value; if (dir != '' && dir.indexOf('/') != dir.length - 1) { dir = dir + '/' } //alert(dir) g_dirname = dir}function random_string(len) { len = len || 32; var chars = 'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678'; var maxPos = chars.length; var pwd = ''; for (i = 0; i < len; i++) { pwd += chars.charAt(Math.floor(Math.random() * maxPos)); } return pwd;}function get_suffix(filename) { pos = filename.lastIndexOf('.') suffix = '' if (pos != -1) { suffix = filename.substring(pos) } return suffix;}function calculate_object_name(filename){ if (g_object_name_type == 'local_name') { g_object_name += "${filename}" } else if (g_object_name_type == 'random_name') { suffix = get_suffix(filename) g_object_name = g_dirname + random_string(10) + suffix } return ''}function get_uploaded_object_name(filename){ if (g_object_name_type == 'local_name') { tmp_name = g_object_name tmp_name = tmp_name.replace("${filename}", filename); return tmp_name } else if(g_object_name_type == 'random_name') { return g_object_name }}function set_upload_param(up, filename, ret){ g_object_name = g_dirname; if (filename != '') { suffix = get_suffix(filename) calculate_object_name(filename) } new_multipart_params = { 'key' : g_object_name, 'policy': policyBase64, 'OSSAccessKeyId': accessid, 'success_action_status' : '200', //讓服務端傳回200,不然，預設會傳回204 'signature': signature, }; up.setOption({ 'url': host, 'multipart_params': new_multipart_params }); up.start();}var uploader = new plupload.Uploader({runtimes : 'html5,flash,silverlight,html4',browse_button : 'selectfiles', container: document.getElementById('container'),flash_swf_url : 'lib/plupload-2.1.2/js/Moxie.swf',silverlight_xap_url : 'lib/plupload-2.1.2/js/Moxie.xap', url : 'http://oss.aliyuncs.com',init: {PostInit: function() {document.getElementById('ossfile').innerHTML = '';document.getElementById('postfiles').onclick = function() { set_upload_param(uploader, '', false); return false;};},FilesAdded: function(up, files) {plupload.each(files, function(file) {document.getElementById('ossfile').innerHTML += '
' + file.name + ' (' + plupload.formatSize(file.size) + ')
'+'
';});},BeforeUpload: function(up, file) { check_object_radio(); get_dirname(); set_upload_param(up, file.name, true); },UploadProgress: function(up, file) {var d = document.getElementById(file.id);d.getElementsByTagName('b')[0].innerHTML = '' + file.percent + "%"; var prog = d.getElementsByTagName('div')[0];var progBar = prog.getElementsByTagName('div')[0]progBar.style.width= 2*file.percent+'px';progBar.setAttribute('aria-valuenow', file.percent);},FileUploaded: function(up, file, info) { if (info.status == 200) { document.getElementById(file.id).getElementsByTagName('b')[0].innerHTML = 'upload to oss success, object name:' + get_uploaded_object_name(file.name); } else { document.getElementById(file.id).getElementsByTagName('b')[0].innerHTML = info.response; } },Error: function(up, err) {document.getElementById('console').appendChild(document.createTextNode("Error xml:" + err.response));}}});uploader.init();
其中：host為OSS存儲桶endpoint位址、accessid為阿裡雲賬号ID、signature為後端生成的簽名、policyBase64為規則json串的base64編碼
通路上傳的檔案
有多種方式可以檢視你上傳的檔案，詳細操作見阿裡雲OSS操作手冊。這裡隻說明一種直接通過URL通路的方式。
針對該bucket設定為開通“靜态頁面”、權限管理設定為“公共可讀”、防盜鍊設定“referer”等安全選項，然後就可以通過類似
http://mybucket.oss-cn-beijing.aliyuncs.com/upload/lee
的方式通路你上傳的圖檔等檔案了。