目前項目oss阿里雲存儲圖片，圖片上傳主要步驟是：前端從服務端拿到簽名signature，再上傳到oss上busket里，上傳成功返回圖片id （imgId），最后再給server端；
注:官網上有個例子，也有封裝的插件一個，可參考使用,[服務端簽名直傳並設置上傳回調](https://help.aliyun.com/document_detail/31927.html?spm=5176.doc31923.2.2.RseG9d)；但因技術有限，未使用；
項目使用angularjs開發的，常用方法$http請求上傳都會報跨域問題，加入使用cors解決跨域但報405 不支持該方法
在使用postman測試接口，可以實現提交無誤，問題出在哪呢？ 后發現postman提交是以form-data格式,對，它使用form表單提交的；
之后寫了個簡單demo，可以實現,后采用一下該方法form表單提交上傳圖片，（后發現某寶亦使用該方法，這都是后話了）
再存在問題，就是使用form表單提交后會跳轉頁面問題，相信很多伙伴都遇到，也有自己的解決方案，
常用方法為 跳轉空的iframe 和 jquery-form.js插件 的方法， 某寶用后者，這里我們用后者；
注意事項： - 使用form表單提交 該form再該頁面外部不能有form進行包裹，否則無效
- 使用 jquery-form.js方法 必須再頁面再加載一次，才有效果，否則報錯 ajaxSubmit is not undefind
目前解決方案，代碼優化如下：
1 <form id="fromName" enctype="multipart/form-data" 2 action="http://******-shanghai.aliyuncs.com" 3 onsubmit="return saveFormImg();" 4 method="post" style="padding-bottom: 100px;"> 5 6 <input type="hidden" name="key" ng-value="key"/> 7 <input type="hidden" name="policy" ng-value="policy"/> 8 <input type="hidden" name="OSSAccessKeyId" ng-value="ossid"/> 9 <input type="hidden" name="signature" ng-value="sign"/> 10 <input type="hidden" name="callback" ng-value="call"/> 11 <input type="hidden" name="x:openid" ng-value="od"/> 12 <input type="file" name="file"/> 13 <input type="submit" value="上 傳"/> 14 15 </form> 16 <script type="text/javascript" src="http://malsup.github.io/jquery.form.js"></script> 17 <script> 18 function saveFormImg() { 19 20 $("#fromName").ajaxSubmit(function (message) { 21 // console.log(message); 22 if (message.code == '200') { 23 var detailImgID = message.data.imgId; 24 25 if (window.localStorage) { 26 localStorage.setItem("OssDetailImgId2", detailImgID); 27 } else { 28 Cookie.write("OssDetailImgId2", detailImgID); 29 } 30 } else { 31 alert('圖片有誤，請重新選擇並提交'); 32 } 33 34 }); 35 return false; //阻止跳轉 36 37 } 38 </script>
注釋： action 為你oss的url；input上ng-value為angularjs的數據綁定一種方法；
x:openid 是項目認證的id，您可能用不到；
form表單配置 * id | enctype |action | method |onsubmit ----|---------- |--------|---------|--------- id名| 提交格式 | 地址 | 方式 | 事件
*加上action 和input，上傳oss共需要8個參數，數據通過第一次請求服務端拿簽名得到，通過數據綁定到form表單input上提交*
返回的id需要傳給server端，因頁面作用域的原因，controller層拿不到每次頁面form提交返回的id；這里使用頁面傳參通過localStotage寫入讀出,考慮到瀏覽器有可能不支持H5 localStorage,可存Cookie中
使用方法： 先按照你的借口需求，寫一個簡單的form提交，包含必要的key-value值， 然后在輸入框中填入數據，測試，成功的話，便可修改，簡化，數據綁定，等等；
最初的demo：
<form id="fromName" enctype="multipart/form-data"
action="http://******-shanghai.aliyuncs.com"
onsubmit="return saveFormImg();" method="post">
<label for= "keyName">keyName</label> <input id="keyName" type="text">
/* ... 多個input，具體看你的接口...*/
<input type="file" name="file"/>
<input type="submit" value="上 傳"/>
</form>
<script type="text/javascript" src="http://malsup.github.io/jquery.form.js"></script>
<script>
function saveFormImg() {
$("#fromName").ajaxSubmit(function (message) {
console.log(message);
});
return false; //阻止跳轉
}
</script>
目前初步實現了功能開發，有什么不足之處，望大家指點，共同進步，目前時間，能力有限，后期嘗試打算做成指令，或者封裝成插件使用；
如您有更好的辦法，還望不吝賜教！