開通對象存儲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，修改如下的代碼片段：

String accessId = ""; // 請填寫您的AccessKeyId。String accessKey = ""; // 請填寫您的AccessKeySecret。String endpoint = "oss-cn-hangzhou.aliyuncs.com"; // 請填寫您的 endpoint。String bucket = "bucket-name"; // 請填寫您的 bucketname 。String host = "https://" + bucket + "." + endpoint; // host的格式為 bucketname.endpoint// callbackUrl為上傳回調服務器的URL，請將下面的IP和Port配置為您自己的真實信息。String callbackUrl = "http://88.88.88.88:8888";String dir = "user-dir-prefix/"; // 用戶上傳文件時指定的前綴

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

// serverUrl是 用戶獲取 '簽名和Policy' 等信息的應用服務器的URL，請將下面的IP和Port配置為您自己的真實信息。serverUrl = 'http://88.88.88.88:8888'

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

三、流程解析

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

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

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

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

{"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/"}

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

{"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"}

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中添加相關依賴

com.aliyun.oss aliyun-sdk-oss 2.5.0

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

# OSS相關配置信息aliyun: oss: endpoint: oss-cn-beijing.aliyuncs.com # oss對外服務的訪問域名 accessKeyId: 該值需要保密，修改成自己的即可 # 訪問身份驗證中用到用戶標識 accessKeySecret: 該值需要保密，修改成自己的即可 # 用戶用于加密簽名字符串和oss用來驗證簽名字符串的密鑰 bucketName: macro-oss10001 # oss的存儲空間 policy: expire: 300 # 簽名有效期(S) maxSize: 10 # 上傳文件大小(M) callback: http://cv4bwb.natappfree.cc/aliyun/oss/callback # 文件上傳成功后的回調地址 dir: prefix: mall/images/ # 上傳文件夾路徑前綴

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

@Configurationpublic class OssConfig { @Value("${aliyun.oss.accessKeyId}") private String ALIYUN_OSS_ACCESSKEYID; @Value("${aliyun.oss.accessKeySecret}") private String ALIYUN_OSS_ACCESSKEYSECRET; @Value("${aliyun.oss.endpoint}") private String ALIYUN_OSS_ENDPOINT; @Bean public OSSClient ossClient(){ return new OSSClient(ALIYUN_OSS_ENDPOINT,ALIYUN_OSS_ACCESSKEYID,ALIYUN_OSS_ACCESSKEYSECRET); }}

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

public class OssPolicyResult { /** * 訪問oss服務身份驗證的用戶標識 * */ private String accessKeyId; /** * 用于驗證請求的合法性，包含兩部分內容 * 1.Expiration項指定了policy的過期時間 * 2.Conditions是一個列表，可以用于指定Post請求的表單域的合法值 * 如：上傳文件的最小和最大允許大小 * 上傳文件的文件名稱 * (經過UTF-8和base64編碼的字符串) * */ private String policy; /** * 對policy簽名后的字符串 * */ private String signature; /** * 上傳文件目錄的前綴 * */ private String dir; /** * oss對外服務訪問的域名 * */ private String host; /** * 上傳成功后的回調設置 * */ private String callback;

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

public class OssCallbackParam { private String callbackUrl;//請求的回調地址 private String callbackBody;//回調時傳入request中的參數 private String callbackBodyType;//回調時傳入參數的格式，比如表單提交形式

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

public class OssCallbackResult { private String filename;//文件名稱 private String mimeType;//文件mimetype private String size;//文件大小 private String height;//圖片的高 private String width;//圖片的寬

7.添加OSS業務接口OssService

public interface OssService { /** * oss上傳策略生成 * */ OssPolicyResult policy(); /** * 上傳成功回調 * */ OssCallbackResult callBack(HttpServletRequest request);}

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

@Servicepublic class OssServiceImpl implements OssService{ @Value("${aliyun.oss.policy.expire}") private long ALIYUN_OSS_EXPIRE; @Value("${aliyun.oss.maxSize}") private Integer ALIYUN_OSS_MAXSIZE; @Value("${aliyun.oss.dir.prefix}") private String ALIYUN_OSS_DIR_PREFIX; @Value("${aliyun.oss.accessKeyId}") private String ALIYUN_OSS_ACCESSKEYID; @Value("${aliyun.oss.endpoint}") private String ALIYUN_OSS_ENDPOINT; @Value("${aliyun.oss.bucketName}") private String ALIYUN_OSS_BUCKETNAME; @Value("${aliyun.oss.callback}") private String ALIYUN_OSS_CALLBACK; @Autowired private OSSClient ossClient; @Override 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; } @Override 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; }}

9. 添加OssController定義接口

@Controller@RequestMapping("/aliyun/oss")public class OssController { @Autowired private OssServiceImpl ossService; @RequestMapping(value = "/policy", method = RequestMethod.GET) @ResponseBody @CrossOrigin //解決跨域問題 public OssPolicyResult policy() { OssPolicyResult result = ossService.policy(); return result; } @RequestMapping(value = "/callback", method = RequestMethod.POST) @ResponseBody @CrossOrigin public OssCallbackResult callback(HttpServletRequest request) { OssCallbackResult ossCallbackResult = ossService.callBack(request); return ossCallbackResult; }}

10.訪問項目測試即可

總結

以上是生活随笔為你收集整理的oss图片跨域问题_图片存储解决方案-阿里云对象存储的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。