阿里云对象存储(oss)之服务端签名后直传_阿里云oss 后端直接上传文件 unlimitedqrcode

本文主要介绍如何基于Post Policy的使用规则在服务端通过各种语言代码完成签名，然后通过表单直传数据到OSS。由于服务端签名直传无需将AccessKey暴露在前端页面，相比JavaScript客户端签名直传具有更高的安全性。

 原理流程如图所示：

开通阿里云oss步骤：

第一步注册登录阿里云

第二步搜索对象存储oss并开通进入OSS管理控制台

第三步创建bucket仓库(需要阿里云官方验证要一定时间 具体创建细节自行百度即可)

第四步修改CORS(否则上传图片会有跨域问题)

第五步开通自己的AccessKey 会有accesskey id 和 accesskey secret 给你，至于往后在此拿accesskey secret则需要短信验证了 

后端步骤

第一步引入 依赖

<!--对象存储-->
    <dependency>
          <groupId>com.alibaba.cloud</groupId>
          <artifactId>spring-cloud-starter-alicloud-oss</artifactId>
    </dependency>
 
 <!--com.alibaba.cloud依赖管理-->
 <dependencyManagement>
     <dependencies>
            <dependency>
                <groupId>com.alibaba.cloud</groupId>
                <artifactId>spring-cloud-alibaba-dependencies</artifactId>
                <version>2.1.0.RELEASE</version>
                <type>pom</type>
                <scope>import</scope>
            </dependency>
     </dependencies>
 </dependencyManagement>

第二步配置核心配置文件  

application.yml  

 application.properties   （开启服务配置功能  可配可不配）

 java代码：

package com.gulimall.gulimallthirdparty.controller;
 
import com.alibaba.fastjson.JSONObject;
import com.aliyun.oss.OSS;
import com.aliyun.oss.OSSClient;
import com.aliyun.oss.common.utils.BinaryUtil;
import com.aliyun.oss.model.MatchMode;
import com.aliyun.oss.model.PolicyConditions;
import com.atguigu.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.io.UnsupportedEncodingException;
import java.security.KeyStore;
import java.text.SimpleDateFormat;
import java.util.Date;
import java.util.LinkedHashMap;
import java.util.Map;
import java.util.logging.SimpleFormatter;
 
@SuppressWarnings("all")
@RestController
public class OssController {
    @Autowired
    OSS ossClient;
 
    @Value("${spring.cloud.alicloud.oss.endpoint}")
    private String endoint;
 
    @Value("${spring.cloud.alicloud.oss.bucket}")
    private String bucket;
 
    @Value("${spring.cloud.alicloud.access-key}")
    private String accessId;
 
    @RequestMapping("oss/policy")
    public R Policy() {
        // 填写Host地址，格式为https://bucketname.endpoint。
        String host = "https://" + bucket + "." + endoint;
        // 设置上传到OSS文件的前缀，可置空此项。置空后，文件将上传至Bucket的根目录下。
        String format = new SimpleDateFormat("yyyy:MM:hh").format(new Date());
        String dir = format + "/";
        Map<String, String> respMap = null;
        try {
            long expireTime = 6000;
            long expireEndTime = System.currentTimeMillis() + expireTime * 1000;
            Date expiration = new Date(expireEndTime);
            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());
        }
        return R.ok().put("data", respMap);
    }
}

 以上是阿里云oss提供给的操作代码 自行修改就行了

前端步骤

链接：https://pan.baidu.com/s/15hQ2deh81-6ZAnAsUXt5Zg 
提取码：zxn4

三个文件放入到你的前端项目中 至于怎么组装到你的项目中去就看你是什么项目了 比如我这个是vue项目 我放入到src-->components下 然后再views里面去引入这个组件

 

 

下面就是你的后端请求路径先去后端通过base64加密的形式拿到你后端的 密钥 回调给客户端，客户端再拿着这个密钥和图片直接给oss 注意先拿密钥再推送图片过去，在action这里写入你的host(bucket+endpoint) 不然客户端拿到签名和图片不知道给谁了

import http from '@/utils/httpRequest.js'
export function policy() {
   return  new Promise((resolve,reject)=>{
        http({
            url: http.adornUrl("/thirdparty/oss/policy"),
            method: "get",
            params: http.adornParams({})
        }).then(({ data }) => {
            resolve(data);
        })
    });
}

有两个请求是因为 这里是跨域了 我做了跨域配置 会先有一个一模一样预检请求(options类型的请求)，检查到没有跨域问题时，我的图片上传请求才开始(post类型的请求)