springboot & 阿里云 OSS 服务端签名直传

持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第6天，点击查看活动详情

首先准备下项目需要的依赖（springboot的这里就不贴了）

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

yml文件

spring:
  cloud:
    alicloud:
      access-key: oss访问key
      secret-key: oss访问密码
      oss:
        endpoint: 地域节点
        bucket: bucket名称
  application:
    name: bugvip-oss-image
server:
  port: 9006

上面 access-key 和 secret-key 去 下图指示的地方找

endpoint: 地域节点 bucket: bucket名称

整个上传的流程

上传之前先请求 后台服务拿到签名（当然整个签名是有过期时间），拿到签名再由前端拿着签名信息直接上传到OSS

下面我们贴一下 服务端代码

@Value("${spring.cloud.alicloud.access-key}")
private String accessId;
@Value("${spring.cloud.alicloud.oss.endpoint}")
private  String endpoint;
@Value("${spring.cloud.alicloud.oss.bucket}")
private  String bucket;
@Autowired
OSS ossClient;
@RequestMapping("/oss/policy")
public R policy(){
    String host = "https://" + bucket + "." + endpoint; // host的格式为 bucketname.endpoint
    String dir = new SimpleDateFormat("yyyy-MM-dd").format(new Date());
    Map<String, Object> 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, Object>();
        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();
    }

    return R.ok().data(respMap);
}

前端代码

uploadImg() {
  this.$refs.cropper.getCropBlob(data => {
    let formData = new FormData();
    let uuid =getUUID();
    getOssPolicy().then(response =>{
    //请求服务端拿到签名信息
      formData.append("policy", response.data.policy);
      formData.append("signature", response.data.signature);
      formData.append("OSSAccessKeyId", response.data.accessid);
      formData.append("key", response.data.dir+"/"+uuid+this.name);
      formData.append("dir", response.data.dir);
      formData.append("host", response.data.host);
      formData.append("success_action_status","200");
      formData.append('callback', this.dataObj.callback)
      formData.append("file", data);
      uploadAvatar(response.data.host,formData).then(res =>{
      //调用上传之后 阿里云会有返回当然也可以做回调
        if(res.status){
        //封装图片地址用来DB存储
          this.open = false;
          this.options.img =response.data.host+"/"+response.data.dir+"/"+uuid+this.name;
          this.$store.commit('user/SET_AVATAR', this.options.img);
          this.visible = false;
          //更新数据库
          this.user.sysUserBuddha=this.options.img;
          this.user.checkStatus=true;
          sysuser.updateStats(this.user).then(res =>{
            if(res.code==20000){
              this.$message({
                message: "上传成功",
                type: "success",
                duration: 1000,
              });
            }
          })
        }else{
          this.$message({
            message: "上传异常",
            type: "error",
            duration: 1000,
          });
        }
      })
    })
  });
}

上传 这里已经上传成功后面是我们本地的逻辑了

我们再去 阿里云OSS 查看一下文件是否存在

到这里简单的OSS 服务端签名直传就完成了 🥰🥰🥰🥰