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

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

前面上传文件到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
  • 0
    点赞
  • 12
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
要将文件上传到阿里云 OSS,需要进行以下几个步骤: 1. 安装阿里云 OSS 的 SDK,可以使用官方提供的 `ali-oss` 包。 2. 在前端代码中,通过 `input` 标签获取用户选择的文件,然后将文件传递给后端。 3. 在后端代码中,使用阿里云 OSS 的 SDK,将文件上传OSS。 下面是一个简单的 Vue.js 前端代码,用于获取用户选择的文件,并向后端发送文件数据: ```html <template> <div> <input type="file" ref="fileInput" @change="uploadFile"> </div> </template> <script> import axios from 'axios' export default { methods: { async uploadFile() { const file = this.$refs.fileInput.files[0] const formData = new FormData() formData.append('file', file) const res = await axios.post('/api/upload', formData) console.log(res) } } } </script> ``` 在上面的代码中,我们使用了 `axios` 库来发送 POST 请求,并将文件数据封装在 `FormData` 对象中。接下来,在后端代码中,我们需要使用 `ali-oss` 库将文件上传OSS: ```javascript const OSS = require('ali-oss') const koaBody = require('koa-body') const client = new OSS({ region: 'your-region', accessKeyId: 'your-accessKeyId', accessKeySecret: 'your-accessKeySecret', bucket: 'your-bucket' }) const uploadFile = async (ctx) => { const file = ctx.request.files.file const result = await client.put(file.name, file.path) ctx.body = { url: result.url } } app.use(koaBody({ multipart: true, formidable: { maxFileSize: 200 * 1024 * 1024 // 设置上传文件大小的上限 } })) app.use(router.post('/api/upload', uploadFile)) ``` 上面的代码中,我们首先使用 `ali-oss` 的 `client` 对象来进行初始化,其中需要填写 OSS 的一些基本信息,比如区域、AccessKeyId、AccessKeySecret 和 Bucket 名称等。 然后,在 `uploadFile` 函数中,我们通过 `ctx.request.files` 对象获取到前端上传文件数据,然后使用 `client.put` 方法文件上传OSS 中,并返回文件的访问 URL。 最后,我们在 `koa-body` 中启用 `multipart` 模式,以支持文件上传,并设置 `formidable` 的 `maxFileSize` 属性来限制上传文件的大小上限。然后,我们在路由中注册上传文件的接口,以便前端可以将文件数据传递给后端。
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值