目前項目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>

目前初步實現了功能開發，有什麽不足之處，望大家指點，共同進步，目前時間，能力有限，後期嘗試打算做成指令，或者封裝成插件使用；

如您有更好的辦法，還望不吝賜教！

圖片上傳oss--先拿server端簽名再上傳oss，返回id值