服务器端获取签名直传OOS

Java后端代码：

首先导入依赖：

<!-- oss -->
<dependency>
    <groupId>com.alibaba.cloud</groupId>
    <artifactId>spring-cloud-starter-alicloud-oss</artifactId>
</dependency>

其次编写一个controller。方便前端来访问拿签名：

@RestController
public class OssController {
    @Autowired
    OSS ossClient;

    /*
        这里我是直接将yaml配置文件中的值注入进来了。方便直接使用。
    */
    @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;

    
      // 请求路径接口，访问这个接口可以放回签名给前端
    @RequestMapping("/oss/policy")
    public R policy(){
        String bucket = "你子集的bucketname"; // 请填写您的 bucketname 。
        String host = "https://" + bucket + "." + endpoint; // host的格式为 bucketname.endpoint
        // callbackUrl为 上传回调服务器的URL，请将下面的IP和Port配置为您自己的真实信息。
        //String callbackUrl = "http://88.88.88.88:8888";

        String pre = new SimpleDateFormat("yyyy-MM-dd").format(new Date());
        // 用户上传文件时指定的前缀。我这里采用每日日期作为前缀。
        String dir = pre+"/"; 

        // 所有签名消息都封装到respMap中，这里代码阿里云oos 也有。我就是从那么赋值过来的。
        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));
            // respMap.put("expire", formatISO8601Date(expiration));

        } catch (Exception e) {
            // Assert.fail(e.getMessage());
            System.out.println(e.getMessage());
        } finally {
            ossClient.shutdown();
        }

        return R.ok().put("data",respMap);
    }
}

前端代码：

就两个ajax完成上传。第一个ajax想服务器端获取签名，第二个ajax向oos发送就好了。然后自己记得保存一下文件路径。方便你后续保存数据库啊等等操作

    // 这个path变量定义在这里是因为，我定义在方法里面，ajax无法给他赋值。你们解决了。可以留言告诉我。谢谢啦！
    let path;
    // 上传文件到OOS  file:文件object对象
    function uploadToOOS(file) {
        // 获取文件名
        var file_name = file.name;

        $.ajax({
            url:"你后端拿签名的路径",
            type:"get",
            dataType:"json",
            async: false,
            success:function (data) {
                // 保存一下文件路径
                path = data.data.host + "/" + data.data.dir + file_name;

                // 构建第二个请求往oos发送的
                let request = new FormData();
                request.append("OSSAccessKeyId", data.data.accessid); //Bucket 拥有者的Access Key Id。
                request.append("policy", data.data.policy); //policy规定了请求的表单域的合法性
                request.append("Signature", data.data.signature); //根据Access Key Secret和policy计算的签名信息，OSS验证该签名信息从而验证该Post请求的合法性
                //---以上都是阿里的认证策略
                request.append("key", data.data.dir + file_name); //文件名字，可设置路径
                request.append("success_action_status", '200'); // 让服务端返回200,不然，默认会返回204
                request.append('file', file); //需要上传的文件 file

                $.ajax({
                    url: data.data.host, //上传阿里地址
                    data: request,
                    processData: false, //默认true，设置为 false，不需要进行序列化处理
                    cache: false, //设置为false将不会从浏览器缓存中加载请求信息
                    async: false, //发送同步请求
                    contentType: false, //避免服务器不能正常解析文件---------具体的可以查下这些参数的含义
                    dataType: 'json', //不涉及跨域  写json即可
                    type: 'post',
                    success: function(response) { //callbackHost：success,request中就是 回调的一些信息，包括状态码什么的
                        console.log("response=",response);
                    },
                    error: function(error) {
                        console.log("error=",error);

                    }
                });
            }
        });

        return path;
    }

注意：请保证你OSS配置了跨域设置。以及分配了你accessId这个用户的权限。否者可能会出现403以及小问题。