圖片存儲解決方案-阿里雲對象存儲

開通對象存儲OSS

1. 打開阿里雲官網，選擇產品對象存儲 OSS

2.開通對象存儲OSS

需要支付寶掃碼登錄

3.進入管理控制檯

4.新建存儲空間

5.跨域資源共享（CORS）的設置

管理文件

整合Springboot實現圖片上傳

服務端簽名直傳並設置上傳回調 : 在服務端完成簽名，並且設置上傳回調，然後通過表單直傳數據到OSS

更多詳細文檔參照：

https://help.aliyun.com/document_detail/31927.html?spm=a2c4g.11186623.6.1525.70f77eaeNZGCTb

一、流程介紹

流程如下：

1. 用戶嚮應用服務器請求上傳的Policy和回調。

2. 應用服務器返回上傳Policy和回調設置。

3. 用戶直接向OSS發送文件上傳請求。

4. OSS根據用戶的回調設置，發送回調請求給應用服務器。

5. 應用服務器返回響應給OSS。

6.OSS將應用服務器返回的內容返回給用戶

二、體驗測試

服務器端源碼 ： aliyun-oss-appserver-java-master

客戶端源碼： aliyun-oss-appserver-js-master

在服務器端找到並打開源碼文件CallbackServer.java，修改如下的代碼片段：

<code>
String
 accessId = 
""
;       
String
 accessKey = 
""
;  
String 
 endpoint = 
"oss-cn-hangzhou.aliyuncs.com"
;  
String
 bucket = 
"bucket-name"
;                     
String
 host = 
"https://"
 + bucket + 
"."
 + endpoint;  

 
String
 callbackUrl = 
"http://88.88.88.88:8888"
;
String
 dir = 
"user-dir-prefix/"
; /<code>

在客戶端打開upload.js文件，找到下面的代碼語句：

<code> 
serverUrl = 
'http
:/<code>

將severUrl改成應用服務器的地址，客戶端可以通過它獲取簽名直傳Policy等信息

三、流程解析

3.1 用戶嚮應用服務器請求上傳Policy和回調。

在客戶端源碼中的upload.js文件中，如下代碼片段的變量serverUrl的值可以用來設置應用服務器的URL。設置好之後，客戶端會向該serverUrl發送GET請求來獲取需要的信息。

3.2 應用服務器返回上傳Policy和回調設置代碼。

應用服務器側的簽名直傳服務會處理客戶端發過來的GET請求消息，您可以設置對應的代碼讓應用服務器能夠給客戶端返回正確的消息。

<code>{
"accessid"
:
"6MKO******4AUk44"
,
"host"
:
"http://post-test.oss-cn-hangzhou.aliyuncs.com"
,
"policy"
:
"eyJleHBpcmF0aW9uIjoiMjAxNS0xMS0wNVQyMDo1Mjoy******Jjdb25kaXRpb25zIjpbWyJjdb250ZW50LWxlbmd0aC1yYW5nZSIsMCwxMDQ4NTc2MDAwXSxbInN0YXJ0cy13aXRoIiwiJGtleSIsInVzZXItZGlyXC8iXV19"
,
"signature"
:
"VsxOcOudx******z93CLaXPz+4s="
,
"expire"
:
1446727949
,
"callback"
:
"eyJjYWxsYmFja1VybCI6Imh0dHA6Ly9vc3MtZGVtby5hbGl5dW5jcy5jdb206MjM0NTAiLCJjYWxsYmFja0hvc3QiOiJvc3MtZGVtby5hbGl5dW5jcy5jdb20iLCJjYWxsYmFja0JvZHkiOiJmaWxlbmFtZT0ke29iamVjdH0mc2l6ZT0ke3NpemV9Jm1pbWVUeXBlPSR7bWltZVR5cGV9JmhlaWdodD0ke2ltYWdlSW5mby5oZWlnaHR9JndpZHRoPSR7aW1hZ2VJdbmZvLndpZHRofSIsImNhbGxiYWNrQm9keVR5cGUiOiJhcHBsaWNhdGlvbi94LXd3dy1mb3JtLXVybGVuY29kZWQifQ=="
,
"dir"
:
"user-dirs/"
}/<code>

上述示例的callback內容採用的是base64編碼。經過base64解碼後的內容如下：

<code>{
"callbackUrl"
: 
"http://oss-demo.aliyuncs.com:23450"
,
"callbackHost"
:
"oss-demo.aliyuncs.com"
,
"callbackBody"
:
"filename=
${object}
&size=
${size}
&mimeType=
${mimeType}
&height=
${imageInfo.height}
&width=
${imageInfo.width}
"
,
"callbackBodyType"
:
"application/x-www-form-urlencoded"
}/<code>

3.3 用戶直接向OSS發送文件上傳請求

3.4 OSS根據用戶的回調設置，發送回調請求給應用服務器

客戶端上傳文件到OSS結束後，OSS解析客戶端的上傳回調設置，發送POST回調請求給應用服務器。

3.5 應用服務器返回響應給OSS。

應用服務器根據OSS發送消息中的authorization來進行驗證，如果驗證通過，則向OSS返回如下json格式的成功消息。

String value: OK

Key: Status

3.6 OSS將應用服務器返回的消息返回給用戶。

四、代碼實現上傳步驟

1. 在pom.xml中添加相關依賴

<code> 
<
dependency
>

   
<
groupId
>
com.aliyun.oss
groupId
>

    
<
artifactId
>
aliyun-sdk-oss
artifactId
>

    
<
version
>
2.5.0
version
>

dependency
>
/<code>

2.修改application.yml文件，添加OSS相關配置

<code> 
aliyun:
  
oss:
    
endpoint:
 
oss-cn-beijing.aliyuncs.com
  
    
accessKeyId:
 
該值需要保密，修改成自己的即可
  
    
accessKeySecret:
 
該值需要保密，修改成自己的即可
  
    
bucketName:
 
macro-oss10001
  
    
policy:
      
expire:
 
300
  
    
maxSize:
 
10
  
    
callback:
 
http://cv4bwb.natappfree.cc/aliyun/oss/callback
  
    
dir:
      
prefix:
 
mall/images/
 /<code>

3.OSS的相關Java配置類 - OSS的連接客戶端OSSClient

<code> 
public
 
class
 
OssConfig
 
{
     
    
private
 String ALIYUN_OSS_ACCESSKEYID;
     
    
private
 String ALIYUN_OSS_ACCESSKEYSECRET;
     
    
private
 String ALIYUN_OSS_ENDPOINT;
     
    
public
 OSSClient ossClient(){
        
return
 new OSSClient(ALIYUN_OSS_ENDPOINT,
																						ALIYUN_OSS_ACCESSKEYID,
																						ALIYUN_OSS_ACCESSKEYSECRET);
    }
}/<code>

4.添加OSS上傳策略封裝對象OssPolicyResult

<code>
public
 
class
 OssPolicyResult {
     
    
private
 
String
 accessKeyId;
     
    
private
 
String
 policy;
     
    
private
 
String
 signature;
     
    
private
 
String
 dir;
     
    
private
 
String
 host;
     
    
private 
 
String
 callback;/<code>

5.添加OSS上傳成功後的回調參數對象OssCallbackParam

<code>
public
 
class
 OssCallbackParam {
    
private
 
String
 callbackUrl; 
    
private
 
String
 callbackBody; 
    
private
 
String
 callbackBodyType;/<code>

6.OSS上傳成功後的回調結果對象OssCallbackResult

<code>
public
 
class
 OssCallbackResult {
    
private
 
String
 filename; 
    
private
 
String
 mimeType; 
    
private
 
String
 size; 
    
private
 
String
 height; 
    
private 
 
String
 width;/<code>

7.添加OSS業務接口OssService

<code>
public
 
interface
 
OssService
 {
     
    
OssPolicyResult 
policy
(
)
;

     
    
OssCallbackResult 
callBack
(
HttpServletRequest request
)
;

}/<code>

8.添加OSS業務接口OssService的實現類OssServiceImpl

<code> 
public
 
class
 OssServiceImpl 
implements
 OssService{
     (
"${aliyun.oss.policy.expire}"
)
    
private
 long ALIYUN_OSS_EXPIRE;
     (
"${aliyun.oss.maxSize}"
)
    
private
 Integer ALIYUN_OSS_MAXSIZE;
     (
"${aliyun.oss.dir.prefix}"
)
    
private
 
String
 ALIYUN_OSS_DIR_PREFIX;
     ( 
"${aliyun.oss.accessKeyId}"
)
    
private
 
String
 ALIYUN_OSS_ACCESSKEYID;
     (
"${aliyun.oss.endpoint}"
)
    
private
 
String
 ALIYUN_OSS_ENDPOINT;
     (
"${aliyun.oss.bucketName}"
)
    
private
 
String
 ALIYUN_OSS_BUCKETNAME;
     (
"${aliyun.oss.callback}"
)
    
private
 
String
 ALIYUN_OSS_CALLBACK;

     
    
private
 OSSClient ossClient;

     
    
public
 OssPolicyResult policy() {
        OssPolicyResult result = 
new
 OssPolicyResult();

        long expireEndTime = System.currentTimeMillis()+ALIYUN_OSS_EXPIRE*
1000
;
        
Date
 expireDate = 
new
 
Date
(expireEndTime);

        SimpleDateFormat sf = 
new
 SimpleDateFormat(
"yyyyMMdd"
);
        
String
 format = sf.format(
new
 
Date
());
        
String
 dir = ALIYUN_OSS_DIR_PREFIX+format+ 
"/"
;
        
try
 {
            PolicyConditions policyConditions = 
new
 PolicyConditions();
            policyConditions.addConditionItem(PolicyConditions.COND_CONTENT_LENGTH_RANGE,
0
,ALIYUN_OSS_MAXSIZE*
1024
*
1024
);
            policyConditions.addConditionItem(MatchMode.StartWith,PolicyConditions.COND_KEY,dir);

            
String
 postPolicy = ossClient.generatePostPolicy(expireDate, policyConditions);
            System.out.println(
"=========>postPolicy:"
+postPolicy);
            byte[] binaryData = postPolicy.getBytes(
"utf-8"
);
            
String
 encodedPolicy = BinaryUtil.toBase64String(binaryData);
            
String
 postSignature = ossClient.calculatePostSignature(postPolicy);

            OssCallbackParam ossCallbackParam = 
new
 OssCallbackParam();
            ossCallbackParam.setCallbackUrl(ALIYUN_OSS_CALLBACK);
            ossCallbackParam.setCallbackBody(
"filename=${object}&size=${size}&mimeType=${mimeType}&height=${imageInfo.height}&width=${imageInfo.width}"
);
            ossCallbackParam.setCallbackBodyType(
"application/x-www-form-urlencoded"
);
            
String
 callback = BinaryUtil.toBase64String(
JSON
.toJSONString(ossCallbackParam).getBytes(
"utf-8"
)) ;

            result.setAccessKeyId(ALIYUN_OSS_ACCESSKEYID);
            result.setPolicy(encodedPolicy);
            result.setDir(dir);
            result.setHost(
"http://"
+ALIYUN_OSS_BUCKETNAME+
"."
+ALIYUN_OSS_ENDPOINT);
            result.setSignature(postSignature);
            result.setCallback(callback);
            System.out.println(
JSON
.toJSONString(result));
        } 
catch
 (UnsupportedEncodingException e) {
            e.printStackTrace();
        }
        
return
 result;
    }

     
    
public
 OssCallbackResult callBack(HttpServletRequest request) {
        OssCallbackResult result = 
new
 OssCallbackResult();
        
String
 filename = request.getParameter( 
"filename"
);
        filename = 
"http://"
.concat(ALIYUN_OSS_BUCKETNAME).concat(
"."
).concat(ALIYUN_OSS_ENDPOINT)
                .concat(
"/"
).concat(filename);
        result.setFilename(filename);
        result.setHeight(request.getParameter(
"height"
));
        result.setWidth(request.getParameter(
"width"
));
        result.setMimeType(request.getParameter(
"mimeType"
));
        result.setSize(request.getParameter(
"size"
));
        
return
 result;
    }
}/<code>

9. 添加OssController定義接口

<code> 
 
public
 
class
 
OssController
 
{
     
    
private
 OssServiceImpl ossService;

     
     
         
    
public
 OssPolicyResult policy() {
        OssPolicyResult result = ossService.policy();
        
return
 result;
    }

     
     
     
    
public
 OssCallbackResult callback(HttpServletRequest request) {
        OssCallbackResult ossCallbackResult = ossService.callBack(request);
        
return
 ossCallbackResult;
    }

}/<code>

10.訪問項目測試即可