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

最新推荐文章于 2024-08-26 09:17:12 发布

Simpier

最新推荐文章于 2024-08-26 09:17:12 发布

阅读量7.8k

点赞数 3

分类专栏：文件上传 OSS vue-admin-template 文章标签： java spring

本文链接：https://blog.csdn.net/Simpier/article/details/121441829

版权

本文记录了阿里云OSS签名直传的实践过程，前端使用vue-admin-template，后端使用Java。介绍了签名直传的概念、优点及前端后端的实现细节，包括获取OSS签名、前端上传文件遇到的问题与解决方案，如参数添加位置、报错处理等。

摘要由CSDN通过智能技术生成

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

前言

练手的项目中使用到了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;

        // 创建OSSClient实例。
        OSS ossClient = new OSSClientBuilder().build(endpoint, accessId, accessKey);
        try {
   
            long expireTime = 30;
            long expireEndTime = System.currentTimeMillis() + expireTime