VUE前端分片直传大文件到OSS方法

最新推荐文章于 2025-11-18 15:46:26 发布

原创

最新推荐文章于 2025-11-18 15:46:26 发布 · 3.4k 阅读

12 ·

CC 4.0 BY-SA版权

文章标签：

#vue #spring boot

本文介绍了如何在Vue前端应用中使用阿里云STS服务进行大文件分片上传到OSS，避免了文件经由后端服务器转发，提高了效率并保障了安全性。详细步骤包括后台创建STS用户与账号、Spring Boot后台实现STS获取、Vue前端SDK的安装与使用，以及大文件分片上传的实现方法。

前面上传文件到OSS是使用的spring boot服务器上传，并搞定了大文件分片上传，但是在前后端分离的程序，使用这个方法效率存问题，用户浏览器先要将文件上传到运行VUE的nginx服务器，再转到spring boot应用服务器，然后再转到OSS服务器，要在服务器之间多转一次，会影响服务器效率。
后经同行提醒，阿里云OSS支持node.js SDK接口，可能在VUE服务器上，直接通过JS接口上传OSS服务器。
上传文件到OSS服务器，需要访问OSS的accessKeyId、accessKeySecret等重要访问密码，直接放到node.js服务器不安全，阿里云OSS提供了STS (Security Token Service) 进行临时授权访问方案，每一次产生一个有时间期限的临时访问Token，可以通过后台产生访问的Token，后台产生Token时先验证用户权限，有权限才能上传文件，这样解决了文件上传权限问题，也避免了在前端服务器上保存访问数据的敏感信息。原理如下，前端App端改为VUE应用服务器原理一样。
在这里插入图片描述
通过几天学习，完整的实现方案如下：

一、后台创建STS用户与帐号

需要提前在阿里云控制台创建好用户信息，并设置好权限。
1、创建访问用户
在这里插入图片描述
用户创建后，创建用户访问的AccessKeyId和accessKeySecret，注意这两个信息的保护，不能泄漏出去。

2、自定义权限策略

权限策略用脚本生成，如下所示，此权限策划包括对xiyoutianxia bucket的获取文件、列清单和上传文件权限。

{
   
   
    "Version": "1",
    "Statement": [
        {
   
   
            "Effect": "Allow",
            "Action": [
                "oss:ListObjects",
                "oss:GetObject",
                "oss:PutObject"
            ],
            "Resource": [
                "acs:oss:*:*:xiyoutianxia",
                "acs:oss:*:*:xiyoutianxia/*"
            ]
        }
    ]
}

3、创建RAM角色
在这里插入图片描述
创建RAM角色，并在下一面将第2条设置的权限策略赋给此角色，这一步注意复制角色权限的ARN，图中右上。

4、将角权限制赋予给第1步创建的用户。
注意要添加下面2个权限，一个是标准的访问STS权限，一个是自己第3步定义的访问指定bucket的权限。
在这里插入图片描述

二、Spring Boot后台实现

1、添加依赖，添加下面3个依赖

<!-- 阿里云OSS -->
<dependency>
   <groupId>com.aliyun.oss</groupId>
   <artifactId>aliyun-sdk-oss</artifactId>
   <version>3.8.1</version>
</dependency>
<dependency>
   <groupId>com.aliyun</groupId>
   <artifactId>aliyun-java-sdk-sts</artifactId>
   <version>3.0.0</version>
</dependency>
<dependency>
   <groupId>com.aliyun</groupId>
   <artifactId>aliyun-java-sdk-core</artifactId>
   <version>4.4.6</version>
</dependency>

2、设置访问参数
我是将需要保密的访问参数，放到一个专门的配置文件，同时先报忽略上传git，避免密钥泄漏。

stsEndpoint: sts.cn-hangzhou.aliyuncs.

最低0.47元/天解锁文章

VUE前端分片直传大文件到OSS方法

一、后台创建STS用户与帐号

二、Spring Boot后台实现

2 条评论