• SpringCloud阿里云实现OSS

    SpringCloud阿里云实现OSS

    阿里云Github地址

    在启动示例进行演示之前，我们先了解一下如何接入 OSS。

    接入相关操作只需修改 accessKey、secretKey、endpoint 即可。

    修改 pom.xml 文件，引入 aliyun-oss-spring-boot-starter。

    1.  
    2. <dependency>
    3.    <groupId>com.alibaba.cloudgroupId>
    4.    <artifactId>aliyun-oss-spring-boot-starterartifactId>
    5. dependency>
    6.

    SpringCloud整合的start为下面的

    1. <-- 应该为下面的-->
    2.     <dependency>
    3.             <groupId>com.alibaba.cloudgroupId>
    4.             <artifactId>spring-cloud-starter-alicloud-ossartifactId>
    5.             <version>2.2.0.RELEASEversion>
    6.         dependency>
    7.

    在配置文件中配置 OSS 服务对应的 accessKey、secretKey 和 endpoint。

    1.  
    2. // application.properties
    3. alibaba.cloud.access-key=your-ak
    4. alibaba.cloud.secret-key=your-sk
    5. alibaba.cloud.oss.endpoint=***
    6.

    以阿里云 accessKey、secretKey 为例，获取方式如下。

    i. 在阿里云控制台界面，单击右上角头像，选择 accesskeys，或者直接登录用户信息管理界面：获取相关key信息填入

    使用SpringCloud阿里云封装好的OSSClient直接进行上传

    1. 测试用例
    2.  
    3. @SpringBootTest
    4. public class TestFor {
    5.     @Resource
    6.     OSSClient ossClient;
    7.     @Test
    8.     public void te() throws FileNotFoundException {
    9.         FileInputStream inputStream = new FileInputStream("C:\\Users\\Pictures\\903d28ab0e2f4bb59bdf8f7c6fd22fe4.jpg");
    10.         ossClient.putObject("gulimall-xuda","903d28ab0e2f4bb59bdf8f7c6fd22fe4.jpg",inputStream);
    11.         ossClient.shutdown();
    12.         System.out.println("上传完成");
    13.     }
    14. }
    15.

    注意：如果您使用了阿里云 STS服务 进行短期访问权限管理，则除了 accessKey、secretKey、endpoint 以外，还需配置 securityToken。

    注入 OSSClient 并进行文件下载操作。

    1.  @Service
    2.  public class YourService {
    3.     @Autowired
    4.     private OSSClient ossClient;
    5.  
    6.     public void saveFile() {
    7.         // download file to local
    8.         ossClient.getObject(new GetObjectRequest(bucketName, objectName), new File("pathOfYourLocalFile"));
    9.     }
    10.  }
    11.

    说明：直接注入OSSClient 方式通常用于大量文件对象操作的场景。如果仅仅是需要读取文件对象内容，OSS Starter 也支持以 Resource 方式读取文件， 前后端整合进行阿里云OSS

    上传流程阿里云对象存储-服务端签名后直传

    通常我们是前端将图片数据上传到后端再通过后端上传到OSS的，但这样直接使用服务器进行交互会使我们的服务器压力很大，

    因为上传到OSS需要带上key的账户和密码，所以我们可以向服务器上传我们的请求，服务器将OSSkey生成一个签名数据返回给前端，前端将图片与签名数据进行携带直接与阿里云OSS进行交互上传，这样可以更快更节省服务器压力 可以参考下列文档 阿里云OSS服务端签名直传地址 在这里插入图片描述 网关设置

    使用到nacos作为服务注册，gateway网关作为服务分发

    1. spring:
    2.   cloud:
    3.     nacos:
    4.       discovery:
    5.         server-addr: 127.0.0.1:8848
    6.     gateway:
    7.       routes:
    8.         - id: test_route
    9.           uri: https://www.baidu.com
    10.           predicates:
    11.             - Query=url,baidu
    13.         - id: third_party_route
    14.           uri: lb://gulimall-third-party
    15.           predicates:
    16.             - Path=/api/thirdparty/**
    17.           filters:
    18.             - RewritePath=/api/thirdparty/(?.*),/$\{segment}
    19.  
    20.   application:
    21.     name: gulimall-gateway
    22.  
    23. server:
    24.   port: 89
    25.  
    26.

    网关配置跨域请求权限

    1. package com.xuda.gateway.config;
    2.  
    3. import org.springframework.context.annotation.Bean;
    4. import org.springframework.context.annotation.Configuration;
    5. import org.springframework.web.cors.CorsConfiguration;
    6. import org.springframework.web.cors.reactive.CorsWebFilter;
    7. import org.springframework.web.cors.reactive.UrlBasedCorsConfigurationSource;
    8.  
    9. /**
    10.  * @author ：程序员徐大大
    11.  * @description：统一配置跨域请求
    12.  * @date ：2022-07-19 22:21
    13.  */
    14. @Configuration
    15. public class CoresConfigur {
    16.         @Bean
    17.         public CorsWebFilter corsWebFilter() {
    18.             UrlBasedCorsConfigurationSource urlBasedCorsConfigurationSource = new UrlBasedCorsConfigurationSource();
    19.             CorsConfiguration coresConfiguration = new CorsConfiguration();
    20.             //配置跨域
    21.             coresConfiguration.addAllowedHeader("*");
    22.             coresConfiguration.addAllowedMethod("*");
    23.          // coresConfiguration.addAllowedOrigin("*");
    24.             //allowedOriginPatterns
    25.             coresConfiguration.addAllowedOriginPattern("*");
    26.             coresConfiguration.setAllowCredentials(true);
    27.             urlBasedCorsConfigurationSource.registerCorsConfiguration("/**",coresConfiguration);
    28.             return new CorsWebFilter(urlBasedCorsConfigurationSource);
    29.         }
    30.     }
    31.  
    32.

    创建第三方OSS项目

    创建yml相关配置

    1. spring:
    2.   cloud:
    3.     alicloud:
    4.       access-key: your-key
    5.       secret-key: your-key
    6.       oss:
    7.         endpoint: oss-cn-shanghai.aliyuncs.com
    8.     nacos:
    9.       discovery:
    10.         server-addr: 127.0.0.1:8848
    11.   application:
    12.     name: third-party
    13. server:
    14.   port: 8900
    15.  
    16.

    编写回调OSS签名密钥代码

    1. package com.xuda.thirdparty.controller;
    2.  
    3. import com.alibaba.fastjson.JSONObject;
    4. import com.aliyun.oss.OSSClient;
    5. import com.aliyun.oss.common.utils.BinaryUtil;
    6. import com.aliyun.oss.model.MatchMode;
    7. import com.aliyun.oss.model.PolicyConditions;
    8. import com.xuda.common.utils.R;
    9. import org.springframework.beans.factory.annotation.Value;
    10. import org.springframework.web.bind.annotation.RequestMapping;
    11. import org.springframework.web.bind.annotation.RestController;
    12.  
    13. import javax.annotation.Resource;
    14. import java.text.SimpleDateFormat;
    15. import java.util.Date;
    16. import java.util.LinkedHashMap;
    17. import java.util.Map;
    18.  
    19. /**
    20.  * @author ：程序员徐大大
    21.  * @description：TODO
    22.  * @date ：2022-07-21 21:35
    23.  */
    24. @RestController
    25. public class OssController {
    26.  
    27.     @Resource
    28.     private OSSClient ossClient;
    29.  
    30.     @Value("${spring.cloud.alicloud.oss.endpoint}")
    31.     private String endpoint;
    32.  
    33.     @Value("${spring.cloud.alicloud.access-key}")
    34.     private String accessId;
    35.  
    36.     @RequestMapping("/oss/policy")
    37.     public R policy() {
    38.         // 阿里云账号AccessKey拥有所有API的访问权限，风险很高。强烈建议您创建并使用RAM用户进行API访问或日常运维，请登录RAM控制台创建RAM用户。
    39.  
    40.         // 填写Bucket名称，例如examplebucket。
    41.         String bucket = "gulimall-xuda";
    42.         // 填写Host地址，格式为https://bucketname.endpoint。
    43.         String host = "https://" + bucket + "."+ endpoint;
    44.         // 设置上传回调URL，即回调服务器地址，用于处理应用服务器与OSS之间的通信。OSS会在文件上传完成后，把文件上传信息通过此回调URL发送给应用服务器。
    45.       //  String callbackUrl = "https://192.168.0.0:8888";
    46.         // 设置上传到OSS文件的前缀，可置空此项。置空后，文件将上传至Bucket的根目录下。
    47.         //将日期作为上传的文件夹目录
    48.         String format = new SimpleDateFormat("yyyy-MM-dd").format(new Date());
    49.         String dir = format+"/";
    50.         Map respMap = null;
    51.         try {
    52.             long expireTime = 30;
    53.             long expireEndTime = System.currentTimeMillis() + expireTime * 1000;
    54.             Date expiration = new Date(expireEndTime);
    55.             PolicyConditions policyConds = new PolicyConditions();
    56.             policyConds.addConditionItem(PolicyConditions.COND_CONTENT_LENGTH_RANGE, 0, 1048576000);
    57.             policyConds.addConditionItem(MatchMode.StartWith, PolicyConditions.COND_KEY, dir);
    58.  
    59.             String postPolicy = ossClient.generatePostPolicy(expiration, policyConds);
    60.             byte[] binaryData = postPolicy.getBytes("utf-8");
    61.             String encodedPolicy = BinaryUtil.toBase64String(binaryData);
    62.             String postSignature = ossClient.calculatePostSignature(postPolicy);
    63.  
    64.             respMap = new LinkedHashMap();
    65.             respMap.put("accessid", accessId);
    66.             respMap.put("policy", encodedPolicy);
    67.             respMap.put("signature", postSignature);
    68.             respMap.put("dir", dir);
    69.             respMap.put("host", host);
    70.             respMap.put("expire", String.valueOf(expireEndTime / 1000));
    71.             // respMap.put("expire", formatISO8601Date(expiration));
    72.  
    73.         } catch (Exception e) {
    74.             // Assert.fail(e.getMessage());
    75.             System.out.println(e.getMessage());
    76.         }
    77.         return  R.ok().put("data",respMap); //创建返回JSON数据封装
    78.     }
    79. }
    80.  
    81.

    JSON返回代码

    1. package com.xuda.common.utils;
    2.  
    3. import org.apache.http.HttpStatus;
    4.  
    5. import java.util.HashMap;
    6. import java.util.Map;
    7.  
    8. /**
    9.  * 返回数据
    10.  *
    11.  */
    12. public class R extends HashMap<String, Object> {
    13.     private static final long serialVersionUID = 1L;
    14.  
    15.     public R() {
    16.         put("code", 0);
    17.         put("msg", "success");
    18.     }
    19.  
    20.     public static R error() {
    21.         return error(HttpStatus.SC_INTERNAL_SERVER_ERROR, "未知异常，请联系管理员");
    22.     }
    23.  
    24.     public static R error(String msg) {
    25.         return error(HttpStatus.SC_INTERNAL_SERVER_ERROR, msg);
    26.     }
    27.  
    28.     public static R error(int code, String msg) {
    29.         R r = new R();
    30.         r.put("code", code);
    31.         r.put("msg", msg);
    32.         return r;
    33.     }
    34.  
    35.     public static R ok(String msg) {
    36.         R r = new R();
    37.         r.put("msg", msg);
    38.         return r;
    39.     }
    40.  
    41.     public static R ok(Map<String, Object> map) {
    42.         R r = new R();
    43.         r.putAll(map);
    44.         return r;
    45.     }
    46.  
    47.     public static R ok() {
    48.         return new R();
    49.     }
    50.  
    51.     public R put(String key, Object value) {
    52.         super.put(key, value);
    53.         return this;
    54.     }
    55. }
    56.  
    57.

    前端VUE代码示例

    2.  
    4.  
    1. <template> 
    2.   <div>
    3.     <el-upload
    4.       action="http://gulimall-xuda.oss-cn-shanghai.aliyuncs.com"
    5.       :data="dataObj"
    6.       list-type="picture"
    7.       :multiple="false" :show-file-list="showFileList"
    8.       :file-list="fileList"
    9.       :before-upload="beforeUpload"
    10.       :on-remove="handleRemove"
    11.       :on-success="handleUploadSuccess"
    12.       :on-preview="handlePreview">
    13.       <el-button size="small" type="primary">点击上传el-button>
    14.       <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过10MBdiv>
    15.     el-upload>
    16.     <el-dialog :visible.sync="dialogVisible">
    17.       <img width="100%" :src="fileList[0].url" alt="">
    18.     el-dialog>
    19.   div>
    20. template>
    21. <script>
    22.    import {policy} from './policy'  //导入封装的请求地址 ,下面的可以直接加上
    23.    /**
    24.    import http from '@/utils/httpRequest.js'
    25. export function policy() {
    26.    return  new Promise((resolve,reject)=>{
    27.         http({
    28.             url: http.adornUrl("/thirdparty/oss/policy"),
    29.             method: "get",
    30.             params: http.adornParams({})
    31.         }).then(({ data }) => {
    32.             resolve(data);
    33.         })
    34.     });
    35. }
    36.    */
    37.    import { getUUID } from '@/utils'   //为了使用工具导入UUID
    38. /**
    39. //获取uuid,需要的可以加上进行更改
    40. export function getUUID () {
    41.   return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, c => {
    42.     return (c === 'x' ? (Math.random() * 16 | 0) : ('r&0x3' | '0x8')).toString(16)
    43.   })
    44. }
    46. */
    47.   export default {
    48.     name: 'singleUpload',
    49.     props: {
    50.       value: String
    51.     },
    52.     computed: {
    53.       imageUrl() {
    54.         return this.value;
    55.       },
    56.       imageName() {
    57.         if (this.value != null && this.value !== '') {
    58.           return this.value.substr(this.value.lastIndexOf("/") + 1);
    59.         } else {
    60.           return null;
    61.         }
    62.       },
    63.       fileList() {
    64.         return [{
    65.           name: this.imageName,
    66.           url: this.imageUrl
    67.         }]
    68.       },
    69.       showFileList: {
    70.         get: function () {
    71.           return this.value !== null && this.value !== ''&& this.value!==undefined;
    72.         },
    73.         set: function (newValue) {
    74.         }
    75.       }
    76.     },
    77.     data() {
    78.       return {
    79.         dataObj: {
    80.           policy: '',
    81.           signature: '',
    82.           key: '',
    83.           ossaccessKeyId: '',
    84.           dir: '',
    85.           host: '',
    86.           // callback:'',
    87.         },
    88.         dialogVisible: false
    89.       };
    90.     },
    91.     methods: {
    92.       emitInput(val) {
    93.         this.$emit('input', val)
    94.       },
    95.       handleRemove(file, fileList) {
    96.         this.emitInput('');
    97.       },
    98.       handlePreview(file) {
    99.         this.dialogVisible = true;
    100.       },
    101.       beforeUpload(file) {
    102.         let _self = this;
    103.         return new Promise((resolve, reject) => {
    104.           policy().then(response => {
    105.             console.log("响应的数据",response);
    106.             _self.dataObj.policy = response.data.policy;
    107.             _self.dataObj.signature = response.data.signature;
    108.             _self.dataObj.ossaccessKeyId = response.data.accessid;
    109.             _self.dataObj.key = response.data.dir +getUUID()+'_${filename}'; //上传所加的目录
    110.             _self.dataObj.dir = response.data.dir;
    111.             _self.dataObj.host = response.data.host;
    112.             resolve(true)
    113.           }).catch(err => {
    114.             reject(false)
    115.           })
    116.         })
    117.       },
    118.       handleUploadSuccess(res, file) {
    119.         console.log("上传成功...")
    120.         this.showFileList = true;
    121.         this.fileList.pop();
    122.         this.fileList.push({name: file.name, url: this.dataObj.host + '/' + this.dataObj.key.replace("${filename}",file.name) });
    123.         this.emitInput(this.fileList[0].url);
    124.       }
    125.     }
    126.   }
    127. script>
    128. <style>
    129.  
    130. style>
    131.  
    132.

  • 相关阅读:
    二十四、【参考素描三大面和五大调】
    docker 构建jar包/vue镜像以及发布
    RabbitMQ简介及安装使用
    力扣 1856. 子数组最小乘积的最大值
    Docker的入门基础和使用
    tf-lite转换记录
    Guava的Service
    ADS2017之S参数仿真
    Blender：对模型着色
    C++异常处理
  • 原文地址：https://blog.csdn.net/LBWNB_Java/article/details/126027875