19.集成阿里云OSS对象储存

参考文档：https://blog.csdn.net/u014494148/article/details/108858360

1。创建阿里云oss对象存储

好了，到这里我们的OSS配置就告一段落接下来是Java对象OSS上传文件
你要做文件上传需要准备好这三个东西：
Endpoint（地域节点）：oss-cn-beijing.aliyuncs.com ，创建存储空间Bucket时选择不同的地区生成的区域节点
存储空间：temp-bucket-cg ， 存储空间的名字
AccessKey ：创建的文件上传子账户的key
Secrect : 创建子账户对应的秘钥

Endpoint：oss-cn-shanghai.aliyuncs.com
存储空间名称：temp-bucket-cf
AccessKey：LTAI5tAusSoa3iXWXZYzw—
Secrect: iF0poPxFhX6lTMBZLDjzVzpN9Yp–

2 上传文件方式 2.1： Java接入OSS, 阿里巴巴提供了Oss的sdk的jar包，实现文件的简单上传

    com.aliyun.oss
    aliyun-sdk-oss
    3.10.2

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

public class AliyunOSSTest {
    public static void main(String[] args) {
        // Endpoint 地域端点
        String endpoint = "http://oss-cn-shanghai.aliyuncs.com"; //bucket外网访问的Endpoint
        // 阿里云主账号AccessKey拥有所有API的访问权限，风险很高。强烈建议您创建并使用RAM账号进行API访问或日常运维，请登录 https://ram.console.aliyun.com 创建RAM账号。
        String accessKeyId = "accessKeyId"; //你的accessKey
        String accessKeySecret = "accessKeySecret"; //你的秘钥
        // 创建OSSClient实例。
        OSS ossClient = new OSSClientBuilder().build(endpoint, accessKeyId, accessKeySecret);
        // 创建PutObjectRequest对象。 ，
        PutObjectRequest putObjectRequest = new PutObjectRequest("temp-bucket-cg-cf" , "a.png",
                new File("C:\Users\whale\Desktop\搜狗截图20200928203405.png"));
        // 上传文件。
        ossClient.putObject(putObjectRequest);
        // 关闭OSSClient。
        ossClient.shutdown();
    }
}

2.2 ： Spring Cloud Alibaba OSS对象存储 pom.xml文件加入依赖

    com.alibaba.cloud
    spring-cloud-starter-alicloud-oss

yml配置文件添加配置信息

spring:
  cloud:
    alicloud:
      access-key: LTAI5tAusSoa3iXWXZ---        # accessKey
      secret-key: iF0poPxFhX6lTMBZLDjzVz---  # 秘钥
      oss:
        endpoint: http://oss-cn-shanghai.aliyuncs.com # 地域端点

3.后端服务签名后直接web上传oss服务 文件上传方案

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

通过web前端直接上传到OSS服务器，这种方式意味着需要把OSS配置参数写死在JS中，有安全隐患

通过web前端把文件上传到后端服务器，后端服务器再把文件上传到OSS，
这种方式虽然没有了暴露OSS配置参数的安全隐患，但是文件通过后端中转了一次在上传，性能不高，而且增加了服务的压力

OSS最佳实践：后端服务签名后前端直传，即：依然是web前端直接把文件上传到OSS服务器，
只是在上传文件之前先请求后端获取OSS配置签名信息，web前端拿到签名信息后和文件一起上传到OSS服务器，
这样一来，文件上传既不需要通过后台服务器中转一次，也不会有暴露OSS配置参数的风险。流程如下：

3.1 yml中配置OSS ,配置中指定bucket-name的命名空间名字,endpoint去掉http://

spring:
  cloud:
    alicloud:
      bucket-name: temp-bucket-cf                          #上传空间bucket
      access-key: LTAI5tAusSoa3iXWXZYz---         # accessKey
      secret-key: iF0poPxFhX6lTMBZLDjzVz---      # 秘钥
      oss:
        endpoint: oss-cn-shanghai.aliyuncs.com # 地域端点

3.2 编写controller，对OSS做签名

//OSS文件上传
@RestController
public class OSSUploadController {
//读取配置
@Value("${spring.cloud.alicloud.access-key}")
private String accessId;
@Value("${spring.cloud.alicloud.secret-key}")
private String accessKey;
@Value("${spring.cloud.alicloud.oss.endpoint}")
private String endpoint;
@Value("${spring.cloud.alicloud.bucket-name}")
private String bucket;

    @Autowired
    private OSS ossClient;

    //服务返回oss签名 ，web拿到签名后，上传文件到OSS
    @GetMapping("/ossSign")
    public JSONResult  ossSign(){
        // host的格式为 bucketname.endpoint
        String host = "https://" + bucket + "." + endpoint;

        // callbackUrl为 上传回调服务器的URL，请将下面的IP和Port配置为您自己的真实信息。
        String callbackUrl = "http://localhost:1040/callback";

        // 用户上传文件时指定的前缀。
        String dir = "itsource";

        try {
            long expireTime = 30;
            long expireEndTime = System.currentTimeMillis() + expireTime * 1000;
            Date expiration = new Date(expireEndTime);

            // PostObject请求最大可支持的文件大小为5 GB，即CONTENT_LENGTH_RANGE为5*1024*1024*1024。
            PolicyConditions policyConds = new PolicyConditions();
            policyConds.addConditionItem(PolicyConditions.COND_CONTENT_LENGTH_RANGE, 0, 1048576000);
            policyConds.addConditionItem(MatchMode.StartWith, PolicyConditions.COND_KEY, dir);

            String postPolicy = ossClient.generatePostPolicy(expiration, policyConds);
            byte[] binaryData = postPolicy.getBytes("utf-8");
            String encodedPolicy = BinaryUtil.toBase64String(binaryData);
            String postSignature = ossClient.calculatePostSignature(postPolicy);

            Map respMap = new LinkedHashMap();
            respMap.put("accessid", accessId);
            respMap.put("policy", encodedPolicy);
            respMap.put("signature", postSignature);
            respMap.put("dir", dir);
            respMap.put("host", host);
            respMap.put("expire", String.valueOf(expireEndTime / 1000));

            return JSONResult.ok().put("data",respMap);
        } catch (Exception e) {
            e.printStackTrace();
            System.out.println(e.getMessage());
        } finally {
            ossClient.shutdown();
        }
        return null;
    }
}

其中返回值R类的源代码如下：

import java.util.HashMap;
import java.util.Map;

public class R extends HashMap {
private static final long serialVersionUID = 1L;

    public R() {
        put("code", 0);
        put("msg", "success");
    }

    public static R ok() {
        return new R();
    }

    public static R ok(String msg) {
        R r = new R();
        r.put("msg", msg);
        return r;
    }

    public static R ok(Map map) {
        R r = new R();
        r.putAll(map);
        return r;
    }

    public static R error() {
        return error(500, "未知异常，请联系管理员");
    }

    public static R error(String msg) {
        return error(500, msg);
    }

    public static R error(int code, String msg) {
        R r = new R();
        r.put("code", code);
        r.put("msg", msg);
        return r;
    }

    public boolean isOK() {
        return Integer.parseInt(this.get("code").toString()) == 0;
    }

    @Override
    public R put(String key, Object value) {
        super.put(key, value);
        return this;
    }
}

以上代码来源于官方案例，使用浏览器访问该controller返回

3.3 前台使用Element-UI，实现 WEB前端上传文件

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

    点击上传
    只能上传jpg/png文件，且不超过500kb

解释一下：
action是上传到OSS的端点

:data="dataObj"是需要提交的数据，即：从后台服务器获取到的签名信息

:before-upload=“beforeUpload” ：选择文件上传之前触发的函数，我们需要在这个函数中发Ajax请求到后端服务器获取签名，然后赋值给 dataObj

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

完整界面如下：

    
   
    
    
    













    
        
            
            
                点击上传
                只能上传jpg/png文件，且不超过500kb
            
        
    

beforeUpload做的事情很简单，就是去服务器获取一个签名，然后赋值给dataObj即可，文件提交上传的时候自然就带上了签名的函数，
最后在handleUploadSuccess方法中处理一下结果.
后续的动作就是把文件的地址根据业务情况保存到数据库表中，以后根据这个地址就可以访问文件了
第一次上传报错提示 ossaccessKeyId 为空：

beforeUpload方法中使用axios异步请求，此处一定要用async和await把异步请求转为同步,否则签名接口还未返回，文件就已经上传了

插曲 Springboot集成elementUI

可以参考下列文章：
https://www.yuque.com/docs/share/cf6fbe9e-e9c0-4d2e-aece-8dc62d6932ca

使用node.js命令初始化vue、element-ui、axios三个组件，找到对应的目录

npm install vue
npm i element-ui -S
npm install axios

去vue和axios目录将下列文件拷到springboot项目的static/js目录下

• axios/dist/axios.min.js

• vue/dist/vue.min.js
  
  
  
  
  参考文档里面element-ui是整个目录拷贝进去，但是我拷贝了用到的
  

• element-ui/lib/index.js

• element-ui/lib/theme-chalk/index.css

• element-ui/lib/theme-chalk/fonts/element-icons.ttf

这些相关资料下载地址：

上传界面中修改如下：

界面中使用到了thymeleaf组件.界面中要引入xmlns:th=“http:www.thymeleaf.org”

pom.xml配置文件加入thymeleaf依赖

    org.springframework.boot
    spring-boot-starter-thymeleaf

yml配置文件中加入thymeleaf配置

thymeleaf:
  cache: false
  mode: HTML5
  content-type: text/html
  suffix: .html
  encoding: UTF-8
  prefix: classpath:/template

3.3 OSS配置跨域

最后一步，配置OSS跨域，因为是WEB端向OSS服务器提交上传请求，所以要配置OSS跨域，否则是上传不了的，登录阿里云，找到跨域访问

到这里就结束了，最后启动程序，完成文件上传测试