SpringBoot+Vue实现OSS客户端签名后web端直传

SpringBoot+Vue实现OSS客户端签名后web端直传

背景信息(来自阿里云文档)

Web端常见的上传方法是用户在浏览器或App端上传文件到应用服务器，应用服务器再把文件上传到OSS。具体流程如下图所示。

和数据直传到OSS相比，以上方法存在以下缺点：

上传慢：用户数据需先上传到应用服务器，之后再上传到OSS，网络传输时间比直传到OSS多一倍。如果用户数据不通过应用服务器中转，而是直传到OSS，速度将大大提升。而且OSS采用BGP带宽，能保证各地各运营商之间的传输速度。
扩展性差：如果后续用户数量逐渐增加，则应用服务器会成为瓶颈。
费用高：需要准备多台应用服务器。由于OSS上行流量是免费的，如果数据直传到OSS，将节省多台应用服务器的费用。

优化方案

阿里云提供了三种优化方案，本篇文章主要介绍第三种方案，即使用表单上传方式将文件上传到OSS利用OSS提供的PostObject接口，通过表单上传的方式将文件上传到OSS。具体流程如图所示：

这种方式不同于传统的将文件上传到服务器，再通过服务器上传至云的方式，并且key和id也没有直接暴露在前端，提高了响应速度的同时也保证了数据的安全性。

实例

Controller层代码

@GetMapping("/web_uploadImg")
    @ApiOperation("web端直传")
    public R web_upload(){
        // 阿里云账号AccessKey拥有所有API的访问权限，风险很高。强烈建议您创建并使用RAM用户进行API访问或日常运维，请登录RAM控制台创建RAM用户。

        String accessId = "LTAI5tA1******HW9N322qm";
        String accessKey = "0BDfhHd******THbEmiBcgEwScC39s";
        // Endpoint以华东1（杭州）为例，其它Region请按实际情况填写。
        String endpoint = "oss-cn-hangzhou.aliyuncs.com";
        // 填写Bucket名称，例如examplebucket。
        String bucket = "**********";
        // 填写Host地址，格式为https://bucketname.endpoint。
        String host = "https://**********.oss-cn-hangzhou.aliyuncs.com";

        SimpleDateFormat simpleDateFormat = new SimpleDateFormat("yyyy-MM-dd");
        String date = simpleDateFormat.format(new Date());


        // 设置上传到OSS文件的前缀，可置空此项。置空后，文件将上传至Bucket的根目录下。
        String dir = "crop/"+date+"/";

        OSSClient client = new OSSClient(endpoint, accessId, accessKey);
        try {
            long expireTime = 30;
            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 = client.generatePostPolicy(expiration, policyConds);
            byte[] binaryData = postPolicy.getBytes("utf-8");
            String encodedPolicy = BinaryUtil.toBase64String(binaryData);
            String postSignature = client.calculatePostSignature(postPolicy);

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

            return RUtils.success(respMap);

        } catch (Exception e) {
            // Assert.fail(e.getMessage());
            System.out.println(e.getMessage());
        }
        return null;
    }

访问路径，可以得到以下响应数据

{
“accessid”:“LTAI5tBDFVar1hoq****”,
“host”:“http://post-test.oss-cn-hangzhou.aliyuncs.com”,
“policy”:“eyJleHBpcmF0aW9uIjoiMjAxNS0xMS0wNVQyMDoyMzoyM1oiLCJjxb25kaXRpb25zIjpbWyJjcb250ZW50LWxlbmd0aC1yYW5nZSIsMCwxMDQ4NTc2MDAwXSxbInN0YXJ0cy13aXRoIiwiJGtleSIsInVzZXItZGlyXC8i****”,
“signature”:“VsxOcOudx******z93CLaXPz+4s=”,
“expire”:1446727949,
“dir”:“user-dirs/”
}

前端使用post方法将表单数据提交至OSS,发送文件上传请求

 <el-upload
          :action="objectData.host"
          list-type="picture"
          :before-upload="web_upload"
          :data="objectData"
      >
        <el-button size="small" type="primary">点击上传</el-button>
 </el-upload>

export default {
  name: "CropAdd",
  data(){
    return{
      //直传必备数据
      objectData:{
        OSSAccessKeyId:'',
        policy:'',
        Signature:'',
        key:'',
        host:'',
        dir:''
      }
    }
  },
  created() {
  },
  methods:{
    //图片上传处理
    web_upload(file){ //上传前调用服务器签名
      let that= this
      return new Promise((resolve, reject) => {
        axios.get('http://localhost:8081/upload/web_uploadImg').then(res =>{
          console.log(res.data.data);
          that.objectData.OSSAccessKeyId = res.data.data.accessid;
          that.objectData.policy = res.data.data.policy;
          that.objectData.Signature = res.data.data.signature;
          that.objectData.dir = res.data.data.dir;
          that.objectData.host = res.data.data.host;
          that.objectData.key = res.data.data.dir + '${filename}';
          resolve(true);
          console.log(that.objectData.host+"/"+that.objectData.dir+file.name)
          that.dialogImageUrl = that.objectData.host+"/"+that.objectData.dir+file.name
        })
        .catch(res =>{
          reject(false)
          console.log(res);
        })
      })

    },

页面

上传本地图片

此时浏览器控制台返回图片url

阿里云OSS文件显示文件存在