阿里云OSS签名直传实现(前端、后端踩坑)

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

---

前言

练手的项目中使用到了OSS的签名直传，将该过程进行记录，以便后续使用。前端采用的是vue-admin-template框架的上传组件，后端采用java完成

---

一、OSS签名直传是什么？

1.概念

Web端常见的上传方法是用户在浏览器或App端上传文件到应用服务器，应用服务器再把文件上传到OSS。这种方式需通过应用服务器中转，传输效率明显低于数据直传至OSS的方式。数据直传至OSS是利用OSS的PostObject接口，使用表单上传方式上传文件至OSS

流程解析：

• 前端向后端请求OSS签名
• 前端得到签名之后，直接上传文件到OSS中
• 上传文件成功之后采用回调机制保存图片地址到数据库中

2.优点

  2.1 签名直传无需将Accesskey暴露在前端页面，相比JavaScript客户端签名直传具有更高的安全性
  2.2 签名直传无需将资源传到应用服务器再转发到OSS中，而是直接上传至OSS中，节省了带宽

二、后端代码

1.请求OSS签名

后端的代码较为简单，只需返回直传所需的一些验证参数即可，具体参数可参照官方文档：阿里云OSS直传.

---

Controller层：

@Api("oss管理接口")
@RestController
@RequestMapping("/ossService")
public class OssController
{
   
    private final OssService ossService;

    public OssController(OssService ossService) {
   
        this.ossService = ossService;
    }

    @ApiOperation(value = "获取oss签名")
    @GetMapping("/getOssSign")
    public R getOssSign(){
   
        Map<String, Object> signMap = ossService.getOssSign();
        if(signMap == null || signMap.size() == 0){
   
            return R.error().msg("未获取到签名，请重试");
        }
        return R.ok().data(signMap);
    }
}

Service层：

@Service
public class OssServiceImpl implements OssService
{
   
    @Override
    public Map<String, Object> getOssSign() {
   
        String accessId = ConstantPropertiesUtils.KEY_ID; // 请填写您的AccessKeyId。
        String accessKey = ConstantPropertiesUtils.KEY_SECRET; // 请填写您的AccessKeySecret。
        String endpoint = ConstantPropertiesUtils.END_POINT; // 请填写您的 endpoint。
        String bucket = ConstantPropertiesUtils.BUCKET; // 请填写您的 bucketname 。
        String host = "https://" + bucket + "." + endpoint; // host的格式为 bucketname.endpoint
        String dir = new DateTime().toString("yyyy/MM/dd"); // 用户上传文件时指定的前缀。
        Map<String, Object> respMap = null;