阿里云文件上传之客户端上传

    阿里云文件上传之前一直是利用服务端上传,但一直存在上传不稳固题目,三兆以上的文件上传经常出现上传超时题目.究其原因客户端将文件上传到业务服务器，然后业务服务器将文件上传到OSS。在这个过程中，一份数据必要在网络上传输两次，会造成网络资源的浪费，增长服务端的资源开销。为了办理这一题目，可以在客户端直连OSS来完成文件上传，无需颠末业务服务器中转。下面简单记录一下实现客户端直传的实战过程,本文技能栈:前端vue+后端springbooot.
    实现客户端直传必要办理两个题目跨域和oss认证授权信息安全性题目(客户端相对服务端不安全)
首先跨域题目,只必要从oss控制台配置即可,配置规则如下:

无需从代码侧配置(会出现sts权限认证失败题目)
参考文档: 跨域配置
授权信息处理的思路是服务端提供临时授权信息给到客户端.下面是服务端代码:

1.    public static void main(String[] args)  {
2.         // 工程代码泄露可能会导致 AccessKey 泄露，并威胁账号下所有资源的安全性。以下代码示例仅供参考。
3.         // 建议使用更安全的 STS 方式，更多鉴权访问方式请参见：https://help.aliyun.com/document_detail/378657.html。
4.         com.aliyun.teaopenapi.models.Config config = new com.aliyun.teaopenapi.models.Config()
5.                 // 必填，请确保代码运行环境设置了环境变量 ALIBABA_CLOUD_ACCESS_KEY_ID。
6.                 .setAccessKeyId("ALIBABA_CLOUD_ACCESS_KEY_ID")
7.                 // 必填，请确保代码运行环境设置了环境变量 ALIBABA_CLOUD_ACCESS_KEY_SECRET。
8.                 .setAccessKeySecret("ALIBABA_CLOUD_ACCESS_KEY_SECRET");
9.         // Endpoint 请参考 https://api.aliyun.com/product/Sts
10.         config.endpoint = "stsEndpoint";
11.         com.aliyun.sts20150401.Client client = new Client(config);
12.         com.aliyun.sts20150401.models.AssumeRoleRequest assumeRoleRequest = new com.aliyun.sts20150401.models.AssumeRoleRequest()
13.                 .setRoleArn("配置角色权限")
14.                 .setRoleSessionName("自定义会话名称");
15.         com.aliyun.teautil.models.RuntimeOptions runtime = new com.aliyun.teautil.models.RuntimeOptions();
16.         try {
17.             com.aliyun.sts20150401.models.AssumeRoleResponse resp = client.assumeRoleWithOptions(assumeRoleRequest, runtime);
18.             System.out.println("打印内容:"+com.aliyun.teautil.Common.toJSONString(resp));
19.         } catch (TeaException error) {
20.             // 此处仅做打印展示，请谨慎对待异常处理，在工程项目中切勿直接忽略异常。
21.             // 错误 message
22.             System.out.println(error.getMessage());
23.             // 诊断地址
24.             System.out.println(error.getData().get("Recommend"));
25.             com.aliyun.teautil.Common.assertAsString(error.message);
26.         } catch (Exception _error) {
27.             TeaException error = new TeaException(_error.getMessage(), _error);
28.             // 此处仅做打印展示，请谨慎对待异常处理，在工程项目中切勿直接忽略异常。
29.             // 错误 message
30.             System.out.println(error.getMessage());
31.             // 诊断地址
32.             System.out.println(error.getData().get("Recommend"));
33.             com.aliyun.teautil.Common.assertAsString(error.message);
34.         }
35.     }

复制代码

必要的依靠:

1. <dependency>
2.             <groupId>com.aliyun</groupId>
3.             <artifactId>sts20150401</artifactId>
4.             <version>1.1.4</version>
5.         </dependency>
6.         <dependency>
7.             <groupId>com.aliyun</groupId>
8.             <artifactId>tea-openapi</artifactId>
9.             <version>0.3.2</version>
10.         </dependency>
11.         <dependency>
12.             <groupId>com.aliyun</groupId>
13.             <artifactId>tea-console</artifactId>
14.             <version>0.0.1</version>
15.         </dependency>
16.         <dependency>
17.             <groupId>com.aliyun</groupId>
18.             <artifactId>tea-util</artifactId>
19.             <version>0.2.21</version>
20.         </dependency>

复制代码

    上面给出代码中必要的配置信息参考官方文档针对于客户端上传创建用户并分配权限. 客户端直传创建RAM用户并授权
vue项目中文件上传核心逻辑:

1. const OSS = require('ali-oss');
2.                           const client = new OSS({
3.                                 // 将<YOUR_BUCKET>设置为OSS Bucket名称。
4.                                 bucket: "<YOUR_BUCKET>",
5.                                 // 将<YOUR_REGION>设置为OSS Bucket所在地域，例如oss-cn-hangzhou。
6.                                 region: "<YOUR_REGION>",
7.                                 accessKeyId: "服务端获取",
8.                                 accessKeySecret: "服务端获取",
9.                                 stsToken: "服务端获取"
10.                           });
11.           
12.                           const result = client.put('qrCode/img/'+file.name, file);
13.                           console.log("beforeAvatarUpload:",result);

复制代码

    上传乐成后文件访问路径默认就是配置的oss域名+文件存储路径.
增补:断点上传,返回上传进度可配合实现进度条

1. // 断点续传,阿里云客服提供,可配合实现进度条
2.                                 let savedCpt;
3.                                 const result = client.multipartUpload('qrCode/voice/' + fileInfo.name, fileInfo, {
4.                                         checkpoint: savedCpt,
5.                                         progress: function(p, cpt, res) {
6.                                                 //progress is generator
7.                                                 console.log("p:", p);
8.                                                 this.uploadPercentage = p * 100
9.                                                 console.log("this.uploadPercentage:", this.uploadPercentage)
10.                                                 console.log("cpt:", cpt);
11.                                                 console.log("res:", res);
12.                                         }
13.                                 });

复制代码

增补:现实场景中会出现连接超时题目,必要举行优化,优化方式就是客户端上传方式优化,由简单上传变更为分片上传.
分片上传场景:
   大文件加快上传
  当文件大小超过5 GB时，利用分片上传可实现并行上传多个Part以加快上传速度。
  网络情况较差
  网络情况较差时，建议利用分片上传。当出现上传失败的时候，您仅需重传失败的Part。
  文件大小不确定
  可以在必要上传的文件大小还不确定的情况下开始上传，这种场景在视频监控等行业应用中比较常见。
  分片上传相关代码:

1. const options = {
2.                                         // 获取分片上传进度、断点和返回值。
3.                                         progress: (p, cpt, res) => {
4.                                                 console.log("上传进度:", p);
5.                                         },
6.                                         // 设置并发上传的分片数量。
7.                                         // parallel: 4,
8.                                         // 设置分片大小。默认值为1 MB，最小值为100 KB。
9.                                         partSize: 1024 * 1024,
10.                                         timeout: 120000
11.                                 };
12.                                 await this.client.multipartUpload("oss路径+文件名", file, options).then(res => {
13.                                         console.log("res:", res)
14.                                 }).catch(err => {
15.                                         console.log(2222, err)
16.                                         throw new Error("操作失败,请重试!");
17.                                 })

复制代码

阿里云官方客户端多文件上传demo

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。