十三.SpringCloudAlibaba极简入门-集成阿里云OSS对象存储

左手的ㄟ右手 2022-12-11 06:24 491阅读 0赞

前言

因为在搞项目，需要对接一下OSS，所以一时兴起就做一下整理，本文章讲述的是如何使用阿里云的对象存储作为文件服务器，您需要登录阿里云，注册一个账号。

1.注册登录阿里云

省略…

2.开通OSS对象存储

点击对象存储oss,前往开通
在这里插入图片描述
点击立即开通
在这里插入图片描述
登录阿里云账号，没有账号自行注册
在这里插入图片描述
同意之后立即开通
在这里插入图片描述
然后进入开通成功页
在这里插入图片描述
注意，没做实名认证的就根据提示做一下实名认证之后再申请开通。

3.创建Bucket

bucket的意思是桶，相当于是一个存储空间，我们创建一个Bucket
在这里插入图片描述
填写相关配置
在这里插入图片描述
填写名称之后，存储类型如果做学习用或访问频率不高就选择“低频访问存储”，读写权限采用公共读，这样任何网络都可以去读取文件内容，然后点击确定
在这里插入图片描述
Endpoint（地域节点）是根据不同地区生成的节点，我们在代码中上传的时候会用到，Bucket 域名 就是该存储空间的访问域名了，用来访问文件的

4.文件管理

在文件管理菜单中可以直接上传以及删除文件
在这里插入图片描述
选择上传的文件
在这里插入图片描述
上传成功之后，点击“详情”按钮就可以看到上传的图片效果了，也可以直接下载
在这里插入图片描述

5.AccessKey子账户创建

我们需要去生成AccessKey，我们可以认为这个是在代码中上传文件所需要的账号信息
在这里插入图片描述
推荐使用子用户AccessKey，因为AccessKey的权限比较高
在这里插入图片描述
点击“创建账户” ， 填写名称，勾选使用方式“编程访问”
在这里插入图片描述
到这，子账户就创建成功了，请妥善保管AcessKey和Secret
在这里插入图片描述
接下来我们需要给子账户添加权限，点击左边用户菜单，找到刚才创建的账户，添加权限
在这里插入图片描述
比如我这里给了一个OSS的管理权限，可以满足文件的读写了
在这里插入图片描述
好了，到这里我们的OSS配置就告一段落接下来是Java对象OSS上传文件

最后需要注意，你要做文件上传需要准备好这三个东西：

  • Endpoint（地域节点）：oss-cn-beijing.aliyuncs.com ，创建存储空间Bucket时选择不同的地区生成的区域节点
  • 存储空间：temp-bucket-cg ， 存储空间的名字
  • AccessKey ：创建的文件上传子账户的key
  • Secrect : 创建子账户对应的秘钥

6.Java接入OSS

引入SDK,阿里云提供了OSS的SDK的jar，我们导入都项目中

  1. <dependency>
  2.     <groupId>com.aliyun.oss</groupId>
  3.     <artifactId>aliyun-sdk-oss</artifactId>
  4.     <version>3.10.2</version>
  5. </dependency>

然后根据文档编写代码实现文件的简单上传

  1. public class AliyunOSSTest { 
  3.     public static void main(String[] args) { 
  4.         // Endpoint 地域端点
  5.         String endpoint = "http://oss-cn-chengdu.aliyuncs.com";
  7.         // 阿里云主账号AccessKey拥有所有API的访问权限，风险很高。强烈建议您创建并使用RAM账号进行API访问或日常运维，请登录 https://ram.console.aliyun.com 创建RAM账号。
  8.         String accessKeyId = "你的accessKey";
  9.         String accessKeySecret = "你的秘钥";
  11.         // 创建OSSClient实例。
  12.         OSS ossClient = new OSSClientBuilder().build(endpoint, accessKeyId, accessKeySecret);
  14.         // 创建PutObjectRequest对象。 ，
  15.         PutObjectRequest putObjectRequest = new PutObjectRequest("存储空间", "a.png",
  16.                 new File("C:\\Users\\whale\\Desktop\\搜狗截图20200928203405.png"));
  18.         // 上传文件。
  19.         ossClient.putObject(putObjectRequest);
  21.         // 关闭OSSClient。
  22.         ossClient.shutdown();
  23.     }
  24. }

编写简单测试代码，演示的是本地文件上传，需要填上区域端点，accessKey，serect秘钥，存储空间等，上传成功，观察服务器的文件管理

在这里插入图片描述
在文件管理菜单中可以看到上传的文件

7.Spring Cloud Alibaba OSS对象存储

Spring Cloud Alibaba 对OSS做了封装，用起来更简单，根据官网文档走，导依赖

  1. <dependency>
  2.             <groupId>com.alibaba.cloud</groupId>
  3.             <artifactId>spring-cloud-starter-alicloud-oss</artifactId>
  4.         </dependency>

注意：导入了aliyun-oss-spring-boot-starter就不要再去导aliyun-sdk-oss了

然后需要在配置文件中配置如下内容

  1. spring:
  2.   cloud:
  3.     alicloud:
  4.       access-key: LTAI4GBU4kV67teSKSzkKpxN
  5.       secret-key: 0f9Djm2Ypds2mMBOma7iuInLqlbJL9
  6.       oss:
  7.         endpoint: http://oss-cn-chengdu.aliyuncs.com

分别是accessKey，秘钥，地域端点，然后编写代码实现文件上传

  1. @SpringBootTest(classes = AdminApplication10200.class)
  2. @RunWith(SpringRunner.class)
  3. public class AliyunOSSTest { 
  5.     @Autowired
  6.     private OSSClient ossClient;
  8.     @Test
  9.     public void uploadTest() throws Throwable { 
  10.         // 创建PutObjectRequest对象:参数 bucket 和 文件名
  11.         PutObjectRequest putObjectRequest = new PutObjectRequest("itsource-hrm", "b.png",
  12.                 new File("C:\\Users\\whale\\Desktop\\搜狗截图20200928203405.png"));
  14.         // 上传文件。
  15.         ossClient.putObject(putObjectRequest);
  17.         // 关闭OSSClient。
  18.         ossClient.shutdown();
  19.     }
  20. }

观察云服务器文件管理列表能看到上传的图片，到此文件结束

8.最佳实践-服务签名后浏览器直传

文件上传方案

通常情况下把文件上传到OSS有三种方案

  • 通过web前端直接上传到OSS服务器，这种方式意味着需要把OSS配置参数写死在JS中，有安全隐患
  • 通过web前端把文件上传到后端服务器，后端服务器再把文件上传到OSS，这种方式虽然没有了暴露OSS配置参数的安全隐患，但是文件通过后端中转了一次在上传，性能不高，而且增加了服务的压力
  • OSS最佳实践：后端服务签名后前端直传，即：依然是web前端直接把文件上传到OSS服务器，只是在上传文件之前先请求后端获取OSS配置签名信息，web前端拿到签名信息后和文件一起上传到OSS服务器，这样一来，文件上传既不需要通过后台服务器中转一次，也不会有暴露OSS配置参数的风险。流程如下：
    在这里插入图片描述

后端服务器签名

依然需要导入 spring-cloud-starter-alicloud-oss 依赖，然后在yml中配置OSS

  1. spring:
  2.   cloud:
  3.     alicloud:
  4.       bucket-name: itsource-hrm #上传空间bucket
  5.       access-key: LTAI4GBU4kV..... #你的key
  6.       secret-key: 0f9Djm2Ypds..... #你的秘钥
  7.       oss:
  8.         endpoint: oss-cn-chengdu.aliyuncs.com  #上传端点

请根据你自己的账号进行配置 ， 然后编写controller，对OSS做签名

  1. //OSS文件上传
  2. @RestController
  3. public class OSSUploadController { 
  4.     //读取配置
  5.     @Value("${spring.cloud.alicloud.access-key}")
  6.     private String accessId;
  7.     @Value("${spring.cloud.alicloud.secret-key}")
  8.     private String accessKey;
  9.     @Value("${spring.cloud.alicloud.oss.endpoint}")
  10.     private String endpoint;
  11.     @Value("${spring.cloud.alicloud.bucket-name}")
  12.     private String bucket;
  14.     @Autowired
  15.     private OSS ossClient;
  17.     //服务返回oss签名 ，web拿到签名后，上传文件到OSS
  18.     @GetMapping("/ossSign")
  19.     public JSONResult  ossSign(){ 
  20.         // host的格式为 bucketname.endpoint
  21.         String host = "https://" + bucket + "." + endpoint;
  23.         // callbackUrl为 上传回调服务器的URL，请将下面的IP和Port配置为您自己的真实信息。
  24.         String callbackUrl = "http://localhost:1040/callback";
  26.         // 用户上传文件时指定的前缀。
  27.         String dir = "itsource";
  29.         try { 
  30.             long expireTime = 30;
  31.             long expireEndTime = System.currentTimeMillis() + expireTime * 1000;
  32.             Date expiration = new Date(expireEndTime);
  34.             // PostObject请求最大可支持的文件大小为5 GB，即CONTENT_LENGTH_RANGE为5*1024*1024*1024。
  35.             PolicyConditions policyConds = new PolicyConditions();
  36.             policyConds.addConditionItem(PolicyConditions.COND_CONTENT_LENGTH_RANGE, 0, 1048576000);
  37.             policyConds.addConditionItem(MatchMode.StartWith, PolicyConditions.COND_KEY, dir);
  39.             String postPolicy = ossClient.generatePostPolicy(expiration, policyConds);
  40.             byte[] binaryData = postPolicy.getBytes("utf-8");
  41.             String encodedPolicy = BinaryUtil.toBase64String(binaryData);
  42.             String postSignature = ossClient.calculatePostSignature(postPolicy);
  44.             Map<String, String> respMap = new LinkedHashMap<String, String>();
  45.             respMap.put("accessid", accessId);
  46.             respMap.put("policy", encodedPolicy);
  47.             respMap.put("signature", postSignature);
  48.             respMap.put("dir", dir);
  49.             respMap.put("host", host);
  50.             respMap.put("expire", String.valueOf(expireEndTime / 1000));
  52.             return JSONResult.ok().put("data",respMap);
  53.         } catch (Exception e) { 
  54.             e.printStackTrace();
  55.             System.out.println(e.getMessage());
  56.         } finally { 
  57.             ossClient.shutdown();
  58.         }
  59.         return null;
  60.     }
  61. }

以上代码来源于官方案例，使用浏览器访问该controller返回
在这里插入图片描述

WEB前端上传文件

前端的上传文件之间需要先访问后端服务获取签名，然后把签名作为参数和文件一起提交到OSS，我这里使用的是ElementUI的Upload组件做例：

  • 上传组件

    1. <el-button size="small" type="primary">点击上传</el-button>
    2. <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>

解释一下：

  1. action是上传到OSS的端点
  2. :data=”dataObj”是需要提交的数据，即：从后台服务器获取到的签名信息
  3. :before-upload=“beforeUpload” ：选择文件上传之前触发的函数，我们需要在这个函数中发Ajax请求到后端服务器获取签名，然后赋值给 dataObj

  4. :on-success=“handleUploadSuccess” : 上传成功之后的结果处理

    • JS部分

    export default { 

    1. name: 'singleUpload',
    2. data() { 
    3.   return { 
    4.     url:'',
    5.     fileList: [],
    6.     dataObj: {     //提交到OSS的参数
    7.       policy: '',
    8.       signature: '',
    9.       key: '',
    10.       ossaccessKeyId: '',
    11.       dir: '',
    12.       host: ''
    13.     }
    14.   };
    15. },
    16. methods: { 
    17.   handleRemove(file, fileList) { 
    18.   },
    19.   handlePreview(file, fileList) { 
    20.   },
    21.   beforeUpload(file) { 
    22.     let $this = this;
    23.     //请求服务器签名
    24.     axios.get('/ossSign').then(function(response){ 
    25.       //设置相关的参数
    26.       $this.dataObj.policy = response.data.policy;
    27.       $this.dataObj.signature = response.data.signature;
    28.       $this.dataObj.ossaccessKeyId = response.data.accessid;
    29.       //上传的文件名，使用UUID处理一下
    30.       $this.dataObj.key = response.data.dir + '/'+getUUID()+'_${filename}';
    31.       $this.dataObj.dir = response.data.dir;
    32.       $this.dataObj.host = response.data.host;
    33.     }).catch(function (error) { 
    34.       console.log(error);
    35.     });
    36.   },
    37.   handleUploadSuccess(res, file) { 
    38.     this.fileList.pop();
    39.     //上传的完整的文件地址
    40.     var urlPath = this.dataObj.host + '/' + this.dataObj.key.replace("${filename}",file.name) ;
    41.     this.url = urlPath;
    42.   }
    43. }

    }

beforeUpload做的事情很简单，就是去服务器获取一个签名，然后赋值给dataObj即可，文件提交上传的时候自然就带上了签名的函数，最后在handleUploadSuccess方法中处理一下结果。

后续的动作就是把文件的地址根据业务情况保存到数据库表中，以后根据这个地址就可以访问文件了

OSS配置跨域

最后一步，配置OSS跨域，因为是WEB端向OSS服务器提交上传请求，所以要配置OSS跨域，否则是上传不了的，登录阿里云，找到跨域访问
在这里插入图片描述
配置跨域，“ * ” 代表允许所有的域名
在这里插入图片描述
到这里就结束了，最后启动程序，完成文件上传测试
在这里插入图片描述
登录OSS，文件列表
在这里插入图片描述

发表评论

表情：
评论列表 （有 0 条评论，491人围观）

还没有评论，来说两句吧...

相关阅读