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

文章目录

• 前言
• 一、前端直传的优点
• 二、实现步骤
• • 2.1、后端方面
  • • 2.1.1 添加依赖
    • 2.1.2 增加接口
    • 2.1.3 测试接口
  • 2.2、前端方面
  • • 2.2.1 安装 cos-js-sdk-v5 依赖
    • 2.2.2 新建组件
    • 2.2.3 使用组件
• 总结

前言

嗨，大家好，我是希留，一个被迫致力于全栈开发的老菜鸟。

上一篇文章说到上传文件使用云服务商的对象存储，感兴趣的可以阅读该文章：传送门

发布后有不少伙伴反馈，前后端分离的项目更好的上传方式是使用前端直传的方式。于是我查阅相关文档，连夜把项目里的上传方式改成前端直传了（项目的技术栈是Springboot + Vue），发现上传速度明显提升了。所以这篇文章就来说说，前端直传的方式应该怎么弄呢？

一、前端直传的优点

前端数据直传的方式相比较后端上传的方式有不少的优点。

• 上传速度快。后端上传的方式是用户数据需先上传到应用服务器，之后再上传到COS。而前端直传的方式，用户数据不用通过应用服务器中转，直传到COS。减少了网络请求响应，速度将大大提升。而且COS采用BGP带宽，能保证各地各运营商之间的传输速度。
• 扩展性好。后端上传的方式会占用带宽，文件上传一多就会占用服务器大量的带宽，导致其它请求阻塞，甚至无法访问等情况。前端直传的方式节约了后端服务器的带宽和负载。
• 成本低。服务器真正的成本基本上都在带宽上，提升带宽的费用是很贵的。而使用前端直传的方式可以减少文件上传到服务器的带宽，从而降低带宽成本。

二、实现步骤

2.1、后端方面

后端需要提供一个生成临时密钥的接口，具体步骤如下，可参考文档，由于我的后端服务是Java语言，所以这里举例使用的是 Java SDK。

2.1.1 添加依赖

com.qcloudcos-sts_api3.1.1

2.1.2 增加接口

代码如下（示例）：

package com.xiliu.common.controller;import com.tencent.cloud.CosStsClient;
import com.tencent.cloud.Response;
import com.xiliu.common.result.R;
import io.swagger.annotations.ApiOperation;
import org.springframework.beans.factory.annotation.Value;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;import java.util.TreeMap;/*** @author xiliu* @description cos存储前端控制器* @date 2022/11/13 17:51*/
@RestController
@RequestMapping("/cos")
public class CosController {@Value("${cos.secretId}")private String secretId;@Value("${cos.secretKey}")private String secretKey;@Value("${cos.regionName}")private String regionName;@Value("${cos.bucketName}")private String bucketName;@ApiOperation(value = "获取cos临时密钥")@GetMapping("/temp-key")public R getTempKey() {TreeMap config = new TreeMap();try {// 替换为您的云 api 密钥 SecretIdconfig.put("secretId", secretId);// 替换为您的云 api 密钥 SecretKeyconfig.put("secretKey", secretKey);// 临时密钥有效时长，单位是秒，默认 1800 秒，目前主账号最长 2 小时（即 7200 秒），子账号最长 36 小时（即 129600）秒config.put("durationSeconds", 1800);// 换成您的 bucketconfig.put("bucket", bucketName);// 换成 bucket 所在地区config.put("region", regionName);// 只允许用户访问 upload/house 目录下的资源config.put("allowPrefixes", new String[] {"upload/house/*"});// 密钥的权限列表。必须在这里指定本次临时密钥所需要的权限。String[] allowActions = new String[] {// 简单上传"name/cos:PutObject",// 表单上传、小程序上传"name/cos:PostObject",// 分块上传"name/cos:InitiateMultipartUpload","name/cos:ListMultipartUploads","name/cos:ListParts","name/cos:UploadPart","name/cos:CompleteMultipartUpload"};config.put("allowActions", allowActions);Response response = CosStsClient.getCredential(config);return R.ok(response);} catch (Exception e) {e.printStackTrace();throw new IllegalArgumentException("no valid secret !");}}
}

2.1.3 测试接口

由于是测试，接口的安全校验我就去掉了，方便测试是否能正常生成临时密钥。结果如下图所示，正常生成了。

2.2、前端方面

前端方面，可以参考文档，我使用的前端框架是Vue，具体步骤如下，上传功能可以封装成一个组件，提供给有需要的地方调用。

2.2.1 安装 cos-js-sdk-v5 依赖

npm install --save cos-js-sdk-v5

2.2.2 新建组件

在 components 目录下新建一个 upload 目录，在 upload 目录下新建 multiUpload.vue 组件。

代码示例如下：

2.2.3 使用组件

代码示例如下：

效果如下图所示：

总结

以上就是本文的全部内容了，感谢大家的阅读。

如果觉得文章对你有帮助，还不忘帮忙点赞、收藏、关注、评论哟，您的支持就是我创作最大的动力！