1200字范文 > oss图片跨域问题_图片存储解决方案-阿里云对象存储

oss图片跨域问题_图片存储解决方案-阿里云对象存储

时间：2020-04-19 13:13:58

开通对象存储OSS

1. 打开阿里云官网，选择产品对象存储 OSS

2.开通对象存储OSS

需要支付宝扫码登录

3.进入管理控制台

4.新建存储空间

5.跨域资源共享(CORS)的设置

管理文件

整合Springboot实现图片上传

服务端签名直传并设置上传回调 :在服务端完成签名，并且设置上传回调，然后通过表单直传数据到OSS

更多详细文档参照：

/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-"; // 请填写您的 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-","policy":"eyJleHBpcmF0aW9uIjoiMjAxNS0xMS0wNVQyMDo1Mjoy******Jjdb25kaXRpb25zIjpbWyJjdb250ZW50LWxlbmd0aC1yYW5nZSIsMCwxMDQ4NTc2MDAwXSxbInN0YXJ0cy13aXRoIiwiJGtleSIsInVzZXItZGlyXC8iXV19","signature":"VsxOcOudx******z93CLaXPz+4s=","expire":1446727949,"callback":"eyJjYWxsYmFja1VybCI6Imh0dHA6Ly9vc3MtZGVtby5hbGl5dW5jcy5jdb206MjM0NTAiLCJjYWxsYmFja0hvc3QiOiJvc3MtZGVtby5hbGl5dW5jcy5jdb20iLCJjYWxsYmFja0JvZHkiOiJmaWxlbmFtZT0ke29iamVjdH0mc2l6ZT0ke3NpemV9Jm1pbWVUeXBlPSR7bWltZVR5cGV9JmhlaWdodD0ke2ltYWdlSW5mby5oZWlnaHR9JndpZHRoPSR7aW1hZ2VJdbmZvLndpZHRofSIsImNhbGxiYWNrQm9keVR5cGUiOiJhcHBsaWNhdGlvbi94LXd3dy1mb3JtLXVybGVuY29kZWQifQ==","dir":"user-dirs/"}

上述示例的callback内容采用的是base64编码。经过base64解码后的内容如下：

{"callbackUrl":"http://oss-:23450","callbackHost":"oss-","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- # oss对外服务的访问域名 accessKeyId: 该值需要保密，修改成自己的即可 # 访问身份验证中用到用户标识 accessKeySecret: 该值需要保密，修改成自己的即可 # 用户用于加密签名字符串和oss用来验证签名字符串的密钥 bucketName: macro-oss10001 # oss的存储空间 policy:expire: 300 # 签名有效期(S) maxSize: 10 # 上传文件大小(M) callback: /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.访问项目测试即可

本内容不代表本网观点和政治立场，如有侵犯你的权益请联系我们处理。

网友评论

网友评论仅供其表达个人看法，并不表明网站立场。