第十七章第五节：获取oss签名以及文件上传功能

上传图片获取签名请求：/oss/policy

响应数据示例：
{
    "msg": "success", 
    "code": 0, 
    "data": {
        "accessid": "LTAI5t7szoumpKM61yjB1uMx", 
        "policy": "eyJleHBpcmF0aW9uIjoiMjAyMS0wNi0xNVQwNzowNDozMS4wODJaIiwiY29uZGl0aW9ucyI6W1siY29udGVudC1sZW5ndGgtcmFuZ2UiLDAsMTA0ODU3NjAwMF0sWyJzdGFydHMtd2l0aCIsIiRrZXkiLCIyMDIxLTA2LTE1LyJdXX0=", 
        "signature": "jRdCsWrc2a065o8I4B2L1hH5iDw=", 
        "dir": "2021-06-15/", 
        "host": "https://onlinemall2021.oss-cn-beijing.aliyuncs.com", 
        "expire": "1623740671"
    }
}

操作数据库表：oss存储对象

1、获取签名

客户端从服务器获取到签名，客户端在把签名信息和上传的文件上传至oss存储对象，如果签名验证成功，文件上传成功！
这样文件上传操作就不需要经过服务器上传，节省资源消耗！
参考：https://help.aliyun.com/document_detail/91868.htm?spm=a2c4g.11186623.2.10.2ef37d9cr1aQAY#concept-ahk-rfz-2fb

新建com.applesnt.onlinemall.thirdparty.controller.OssController类

package com.applesnt.onlinemall.thirdparty.controller;

import com.aliyun.oss.OSS;
import com.aliyun.oss.common.utils.BinaryUtil;
import com.aliyun.oss.model.MatchMode;
import com.aliyun.oss.model.PolicyConditions;
import com.applesnt.common.utils.R;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.beans.factory.annotation.Value;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import java.text.SimpleDateFormat;
import java.util.Date;
import java.util.LinkedHashMap;
import java.util.Map;

@RestController
public class OssController {

   /*注入oss客户端操作对象*/
    @Autowired
    OSS ossClient;

    /*从配置文件中获取endpoint值*/
    @Value("${spring.cloud.alicloud.oss.endpoint}")
    private String endpoint;
    
    /*从配置文件中获取bucket值*/
    @Value("${spring.cloud.alicloud.oss.bucket}")
    private String bucket;
    
    /*从配置文件中获取accessId值*/
    @Value("${spring.cloud.alicloud.access-key}")
    private String accessId;

    @RequestMapping("/oss/policy")
    public R policy(){

        // host的格式为 bucketname.endpoint
        String host = "https://" + bucket + "." + endpoint; 
        //上传的目录 以每天的日期为单位分目录
        String format = new SimpleDateFormat("yyyy-MM-dd").format(new Date());
        String dir = format+"/"; 

        Map<String, String> respMap = null;
        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);

            respMap = new LinkedHashMap<String, String>();
            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));

        } catch (Exception e) {
            System.out.println(e.getMessage());
        } finally {
            ossClient.shutdown();
        }
        /*必须返回json格式，因为上传时从data变量里取值*/
        return R.ok().put("data",respMap);
    }
}

配置文件增加bucket属性值

#服务端口号
server:
  port: 30000
spring:
  #服务名称
  application:
    name: onlinemall-third-party
  cloud:
    #nacos注册中心
    nacos:
      discovery:
        server-addr: 116.196.121.63:8848
    #oss配置
    alicloud:
      access-key: LTAI5t7szoumpKM61yjB1uMx
      secret-key: iwPMJEYC4ngHuU1bJQ2gw3e6qg8pZV
      oss:
        endpoint: oss-cn-beijing.aliyuncs.com
        bucket: onlinemall2021 #新增

访问：localhost:30000/oss/policy

2、配置网关(请求第三方服务先通过网关路由到指定的服务)

onlinemall-gateway

    #配置renren-fast的网关路由
    gateway:
      routes:
        #分类维护的路由配置
        - id: product_route
          uri: lb://onlinemall-product
          predicates:
            - Path=/api/product/**
          filters:
            - RewritePath=/api/(?<segment>.*), /$\{segment}
        #第三方服务的路由配置
        - id: third_party_route
          uri: lb://onlinemall-third-party
          predicates:
            - Path=/api/thirdparty/**
          filters:
            - RewritePath=/api/thirdparty/(?<segment>.*), /$\{segment}
        #获取验证码的路由配置
        - id: admin_route
          uri: lb://renren-fast
          predicates:
            - Path=/api/**
          filters:
            - RewritePath=/api/(?<segment>.*), /renren-fast/$\{segment}

3、启动相关服务（网关和第三方）访问

http://localhost:88/api/thirdparty/oss/policy

4、拷贝上传组件到vue项目

下载地址：https://files-cdn.cnblogs.com/files/applesnt/upload.zip

把下载的upload文件夹放到src\components目录下

5、修改multiUpload.vue、singleUpload.vue文件的oss上传路径以及policy.js请求路径

multiUpload.vue:多文件上传
singleUpload.vue：单文件上传
policy.js:发送服务器请求，获取签名

multiUpload.vue、singleUpload.vue

路径修改为oss对象存储路径
action="http://onlinemall2021.oss-cn-beijing.aliyuncs.com"

上传到oss的哪个目录下，把 '/'去掉
_self.dataObj.key = response.data.dir + '/'+getUUID()+'_${filename}';

policy.js

url: http.adornUrl("/thirdparty/oss/policy"),

6、品牌添加页调用上传组件

src\views\modules\product\brand-add-or-update.vue

<el-form-item label="品牌logo地址" prop="logo">
  <single-upload v-model="dataForm.logo"></single-upload>
</el-form-item>

7、配置oss对象存储跨域

图一：

图二：

8、重启相关服务 访问项目

9、查看oss对象存储