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

开通对象存储OSS

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

db279c9c6ef3e36ca8210a5cb03ce3f9.png

2.开通对象存储OSS

4367abb3aef583b79ac92ecc2c560e85.png

需要支付宝扫码登录

3.进入管理控制台

1d8a8d6c9316049ac0ac675d26a5cf1b.png

4.新建存储空间

fe5ccd5b49553ed589b7f9ee91049f08.png
52da4905e5f08b208d037795d3a14daf.png

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

c367bd9da36c90eab9efb25dc4c893a2.png
db1d711f30574ae414abd4a79ce51fa7.png
db88b28dfe0c30d47a05e1749aa32692.png
6ddf2c81718b9e0da8a345a4ea2aed3e.png

管理文件

1b52452ce79c368c09e91553f1762c92.png

整合Springboot实现图片上传

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

更多详细文档参照:

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

一、流程介绍

f7e1bc2daf226b8e77cdfb505a2e52e7.png

流程如下:

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.访问项目测试即可

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/471686.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

2015-8-10工作日志

1. 工作规划:完成系统请假管理的功能。 (1)根据系统需求完成请假管理model; (2)进行请假流程的deployment; (3)进行请假流程的流程定义管理; (4&a…

LeetCode 2001. 可互换矩形的组数

文章目录1. 题目2. 解题1. 题目 用一个下标从 0 开始的二维整数数组 rectangles 来表示 n 个矩形&#xff0c;其中 rectangles[i] [widthi, heighti] 表示第 i 个矩形的宽度和高度。 如果两个矩形 i 和 j&#xff08;i < j&#xff09;的宽高比相同&#xff0c;则认为这两…

google 浏览器默认打开控制台_前端开发调试:浏览器console方法总结

今天突发奇想&#xff0c;准备总结下console的各个函数。以前都是只用一个console.log(),查了一下发现有好多&#xff0c;就记下来&#xff0c;方便以后查阅。速记consoleConsole对象提供浏览器控制台的接入&#xff0c;不同浏览器是不一样的&#xff0c;这里介绍普遍存在的Con…

江小白包装设计原型_雪碧和江小白的品牌跨界合作之旅可谓是一场品牌包装的视觉盛宴...

大家好&#xff0c;我是古小一&#xff0c;一个行走在酒水品牌包装设计不归路上的小编&#xff01;当下品牌间的跨界合作越来越多&#xff0c;消费者不但有审美疲劳的趋势&#xff0c;脑洞过大的跨界还容易引发群嘲。不过好在有热情网友的帮助&#xff0c;雪碧与江小白已经自然…

LeetCode 2002. 两个回文子序列长度的最大乘积(状态压缩+枚举状态子集+预处理)

文章目录1. 题目2. 解题2.1 超时2.2 预处理优化1. 题目 给你一个字符串 s &#xff0c;请你找到 s 中两个 不相交回文子序列 &#xff0c;使得它们长度的 乘积最大 。 两个子序列在原字符串中如果没有任何相同下标的字符&#xff0c;则它们是 不相交 的。 请你返回两个回文子…

[hdu5372 Segment Game]树状数组

题意&#xff1a;有两种操作&#xff1a;(1)插入线段&#xff0c;第i次插入的线段左边界为Li&#xff0c;长度为i (2)删除线段&#xff0c;删除第x次插入的线段。每次插入线段之前询问有多少条线段被它覆盖。 思路&#xff1a;由于插入的线段长度是递增的&#xff0c;所以第i次…

怎样从php转向java_Github标星10.8K!Java 实战博客项目分享

点击上方 Java后端&#xff0c;选择 设为星标优质文章&#xff0c;及时送达来源&#xff1a;开源最前线(ID&#xff1a;OpenSourceTop)作为程序员每天就是不停的敲代码&#xff0c;改Bug&#xff0c;写起代码来那真是行云如流水&#xff0c;但要你码出点文字&#xff0c;写点技…

Docker 部署一个用 Python 编写的 Web 应用

文章目录1. 安装 docker2. 编写代码3. 编写 Dockerfile4. 上传镜像5. 修改镜像learn from 《深入剖析Kubernetes》1. 安装 docker 在 WSL2 中安装 docker https://www.runoob.com/docker/ubuntu-docker-install.html 会报错&#xff1a; # Executing docker install script, …

python 代码文件路径注意事项

检查代码的工作路径&#xff0c;是不是代码文件所在路径 导入别处的包 基于该代码的工作路径写如下的代码&#xff0c;加入相对路径&#xff0c;可以找到要导入的文件 import sys import os sys.path.append("../xxx/") sys.path.append("../../xxx") fro…

微信小程序独立服务器的好处,微信小程序的优势和缺点

原标题&#xff1a;微信小程序的优势和缺点微信小程序从刚开始面世就引起了很多人的关注&#xff0c;虽然截止到目前&#xff0c;官方仍没有大肆宣传和推广&#xff0c;但是微信小程序的所带来的影响还是很大的&#xff0c;甚至让苹果&#xff0c;百度&#xff0c;阿里都头疼不…

LeetCode 2007. 从双倍数组中还原原数组(map)

文章目录1. 题目2. 解题1. 题目 一个整数数组 original 可以转变成一个 双倍 数组 changed &#xff0c;转变方式为将 original 中每个元素 值乘以 2 加入数组中&#xff0c;然后将所有元素 随机打乱 。 给你一个数组 changed &#xff0c;如果 change 是 双倍 数组&#xff…

怎么画韦布尔分布_手机按键寿命测试的样本数量怎么定?一文看懂 简述威布尔分布及其应用...

有一种手机按键的质量要求是&#xff0c;95%的产品的按压寿命需要达到1万次。根据这一要求&#xff0c;QC部门需要进行1.2万次的按压测试。那么QC部门需要选取多少按键来进行测试&#xff08;不允许有失效&#xff09;&#xff0c;才能保证95%的按键按压寿命达到1万次呢&#x…

Chrome浏览器报错:Origin null is not allowed by Access-Control-Allow-Origin.

问题&#xff1a;Chrome浏览器报错&#xff1a;Origin null is not allowed by Access-Control-Allow-Origin. 原因&#xff1a;.js文件中使用load()方法&#xff0c;而Chrome浏览器出于安全起见&#xff0c;不允许load本地文件。 方法&#xff1a;给Chrome添加启动参数--allow…

LeetCode 2008. 出租车的最大盈利(DP)

文章目录1. 题目2. 解题1. 题目 你驾驶出租车行驶在一条有 n 个地点的路上。 这 n 个地点从近到远编号为 1 到 n &#xff0c;你想要从 1 开到 n &#xff0c;通过接乘客订单盈利。 你只能沿着编号递增的方向前进&#xff0c;不能改变方向。 乘客信息用一个下标从 0 开始的二…

华为服务器清除系统日志,清空服务器日志

清空服务器日志 内容精选换一换为加强对系统数据的容灾管理&#xff0c;云堡垒机支持配置日志备份&#xff0c;提高审计数据安全性和系统可扩展性。本小节主要介绍如何在系统配置FTP/SFTP服务器参数&#xff0c;将日志远程备份至FTP/SFTP服务器。开启远程备份后&#xff0c;系统…

动态行转列小记

数据库环境&#xff1a;SQL SERVER 2005 最近在整理数据时&#xff0c;要将查询到的数据张贴到Excel中。在Excel中&#xff0c;要展示的行数是固定的&#xff0c;列数不固定&#xff0c; 一个一个数据的复制张贴太烦人。想了一个偷懒的方法&#xff0c;直接将查询的数据进行行转…

使用swiper_关于使用swiper制作web轮播图

我这个方法是很适用于小白的&#xff0c;利用swiper插件的应用。https://www.swiper.com.cn/这个是swiper中文官网的网址&#xff0c;上面有关于swiper的说明和使用方法。想要用到swiper插件要在官网下载swiper文件&#xff0c;如下图所示&#xff0c;在导航条上面找到下载swip…

LeetCode 2012. 数组美丽值求和

文章目录1. 题目2. 解题1. 题目 给你一个下标从 0 开始的整数数组 nums 。对于每个下标 i&#xff08;1 < i < nums.length - 2&#xff09;&#xff0c;nums[i] 的 美丽值 等于&#xff1a; 2&#xff0c;对于所有 0 < j < i 且 i < k < nums.length - 1 …

华为服务器上传文件后怎么通过链接查看,远程服务器文件上传后的操作

远程服务器文件上传后的操作 内容精选换一换本节指导您基于Linux操作系统环境完成镜像文件快速导入&#xff0c;推荐使用云平台的EulerOS云服务器作为转换镜像格式和生成位表文件的环境。Linux操作系统环境下&#xff0c;建议使用qemu-img-hw工具进行镜像格式转换。已完成镜像文…

Android学习笔记(十三)

Android中的广播机制 Android提供了一套完整的API&#xff0c;允许应用程序自由地发送和接受广播。 发送广播的方法借助于Intent&#xff0c;接受广播的方法需要广播接收器&#xff08;BroadcastsReceiver&#xff09;。 Android中的广播主要分为两种类型&#xff0c;标准广播和…