基于OSS前端直传的分片上传以及断点续传

一、大文件分片上传

原型

大文件如果直接上传的话由于nginx的限制会导致响应500报错,或者响应时间过长导致响应超时

image.png

并且大文件上传有如下缺点

  1. 上传时间长: 对于大文件,直接上传可能需要较长时间,特别是在网络速度较慢或不稳定的情况下。这可能会导致用户等待时间过长,影响用户体验。
  2. 内存占用: 直接上传大文件可能会占用大量内存,特别是在客户端进行文件读取和上传的情况下。这可能会导致客户端程序消耗大量内存资源,甚至在上传大型文件时出现内存溢出的情况。
  3. 网络传输中断: 在网络不稳定的环境下,上传大文件可能会遇到网络传输中断的问题。这会导致上传过程中断,需要重新开始上传,从而增加了额外的时间和网络流量。
  4. 服务器端资源消耗: 直接上传大文件可能会对服务器端资源造成较大负担,特别是在高并发情况下。大文件上传会占用服务器的网络带宽和处理能力,可能会影响服务器的稳定性和性能。

解决方案

根据这种情况我们往往采用分片上传来进行解决
分片上传:将一个大文件在前端进行分片,并将每个小分片进行编码异步上传至后端服务器中。后端收到这些分片后解码并按顺序进行重组

优点:

  1. 提高上传速度。在网络带宽允许的情况下,可以同时上传多个文件片段,从而加快了整个文件的上传速度
  2. 方便前端做上传进度条处理,提高用户体验
  3. 断点续传,分片上传过程中若出现了网络问题或其他问题导致上传中断,只需要上传中断的部分而不需要上传整个文件,提高了上传的可靠性

由于公司采用的是阿里云的oss对象存储,oss中已经我们提供了分片上传这样一项服务,因此我们只需要在前端简单的配置便可以实现分片上传并返回进度条,前端甚至不需要手动分片

import OSS from "ali-oss";
interface OSSConfig {accessKeyId: string;accessKeySecret: string;region: string;bucket: string;
}export class OssService {private client: any;constructor(ossConfig: OSSConfig) {this.client = new OSS({accessKeyId: ossConfig.accessKeyId,accessKeySecret: ossConfig.accessKeySecret,region: ossConfig.region,bucket: ossConfig.bucket,});}// 开始分片上传。async multipartUpload(ossPath: string,file: File,progressCallback: (progress: number) => void) {return new Promise(async (resolve, reject) => {try {const result = await this.client.multipartUpload(ossPath, file, {// 回调返回进度条progress: async (p: number) => {progressCallback(p);},});resolve(result);} catch (e: any) {if (e.code === "ConnectionTimeoutError") {reject("TimeoutError");}reject(e);}});}
}
import { OssService } from "@/util/OSS/index";// OSS 配置
const ossConfig = {accessKeyId: "accessKeyId",accessKeySecret: "accessKeySecret",endpoint: "endpoint",bucket: "bucket",region: "region",
};const oss = new OssService(ossConfig);// 以naiveui UI框架 的自定义上传 举例
async function customRequest({file,data,onFinish,onError,
}: UploadCustomRequestOptions) {try {// 工具类引用const res = await oss.multipartUpload(`/file/${file.file?.name}`,file.file as File,(e) => {// 返回进度条,做进度条处理console.log(e);});onFinish();message.success("上传成功");} catch (e) {onError();message.error("上传失败");}
}

大致效果

动画.gif
动画2.gif

缺点

目前的OSS配置项是保存在前端,因此安全性不高。即使通过后端加密后返回最终也需要在前端进行解密,对于懂点逆向的人来说,需要破解难度不高
因此,需要将OSS的配置项存储到后端,前端通过接口请求后端返回OSS的一个临时授权凭证(STS),根据这个临时授权凭证便可以进行前端直传到OSS服务器

实现方法

  1. 通过官网进行配置

使用STS临时访问凭证访问OSS_对象存储(OSS)-阿里云帮助中心

  1. 编写生成sts临时凭证接口
import * as OSS from 'ali-oss';
import * as STS from '@alicloud/sts-sdk';
import ossConfig, { STSConfig } from 'src/config/oss';
/*** 获取签名*/async getSignature() {const stsEndpoint = STSConfig.stsEndpoint;const accessKeyId = STSConfig.accessKeyId;const accessKeySecret = STSConfig.accessKeySecret;const roleArn = STSConfig.roleArn;// 生成签名,策略等信息const sts = new STS({endpoint: stsEndpoint,accessKeyId: accessKeyId,accessKeySecret: accessKeySecret,});// 响应给客户端的签名和策略等信息return {...(await sts.assumeRole(roleArn, 'RamOssTest')),};}
  1. 前端拿到临时凭证后再进行直传
import OSS from "ali-oss";
import { oss_Config } from "@/config";
import { getSignature } from "@/api/common/upload";export class OssService {private client: any;// 定义中断点。protected abortCheckpoint: any;constructor() {this.initOss();}// 新增凭证请求async initOss() {const { Credentials } = (await getSignature()).data;this.client = new OSS({accessKeyId: Credentials.AccessKeyId,accessKeySecret: Credentials.AccessKeySecret,stsToken: Credentials.SecurityToken,region: oss_Config.region,bucket: oss_Config.bucket,});}// 开始分片上传。async multipartUpload(ossPath: string,file: File,progressCallback: (progress: number) => void) {return new Promise(async (resolve, reject) => {try {const result = await this.client.multipartUpload(ossPath, file, {checkpoint: this.abortCheckpoint,progress: async (p: number, cpt: any) => {// 为中断点赋值。this.abortCheckpoint = cpt;progressCallback(p);},});resolve(result);} catch (e: any) {// 捕获超时异常。if (e.code === "ConnectionTimeoutError") {reject("TimeoutError");}reject(e);}});}// 暂停上传。pause() {this.client.cancel();}
}
// 自定义文件上传 & 续传
async function customRequest({file,onFinish,onError,
}: UploadCustomRequestOptions) {try {// 文件重命名const fileExtension = getFileExtension(file.file?.name as string);// const newFileName = (await calculateFileHash(file.file as File)) + fileExtension;const newFileName = uuid() + fileExtension;// 设置上传进度processing.value = true;const res: any = await oss.multipartUpload(`/file/${newFileName}`,file.file as File,(e) => {percentage.value = Math.floor(e * 100);});processing.value = false;file.url = `http://${oss_Config.bucket}.${oss_Config.endpoint}${res.name}`;fileList.value.push(file);onFinish();emit("update:value", fileList.value);message.success("上传成功");} catch (e) {onError();processing.value = false;message.error("上传失败");}
}

原理

image.png


二、断点续传

断点续传是一种网络传输技术,用于在文件传输过程中实现中断后的续传操作。其核心思想是在文件传输过程中保存传输的断点信息,以便在传输中断或失败后能够在之后的某个时间点恢复传输,而不需要重新开始传输整个文件

结合阿里云OSS我们也很容易可以实现断点续传

只需要在OSS工具类中新加两个地方即可实现!

  async multipartUpload(ossPath: string,file: File,progressCallback: (progress: number) => void) {return new Promise(async (resolve, reject) => {try {const result = await this.client.multipartUpload(ossPath, file, {checkpoint: this.abortCheckpoint, // 新加progress: async (p: number, cpt: any) => {// 为中断点赋值。this.abortCheckpoint = cpt; // 新加progressCallback(p);},});resolve(result);} catch (e: any) {// 捕获超时异常。if (e.code === "ConnectionTimeoutError") {reject("TimeoutError");}reject(e);}});}

效果

动画3.gif

原理

image.png

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/383634.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

亚信安慧AntDB亮相PostgreSQL中国技术大会,获“数据库最佳应用奖”并分享数据库应用实践

7月12日,第13届PostgreSQL中国技术大会在杭州顺利举办,亚信安慧AntDB数据库荣获“数据库最佳应用奖”。大会上,亚信安慧AntDB数据库同事带来《基于AntDB的CRM系统全域数据库替换实践》和《亚信安慧AntDB数据库运维之路》两场精彩演讲&#xf…

STM32H7的LPUART基础和唤醒示例

STM32H7的LPUART基础知识 硬件框图低功耗的高级特性低功耗串口的时钟以及波特率低功耗串口发送时序低功耗串口支持的唤醒方式 LPUART 的全称是 Low power universal synchronous asynchronous receiver transmitter,中文意思是低功耗通用异步收发器,简称…

PHP多功能投票系统源码小程序

🎉决策不再难!「多功能投票小程序」一键搞定所有选择困难症✨ 🤔选择困难?「多功能投票小程序」来救场! 每次聚会、团队讨论还是日常小决策,是不是总有那么几个瞬间让你陷入“选哪个好呢?”的…

数驭未来,景联文科技构建高质大模型数据库

国内应用层面的需求推动AI产业的加速发展。根据IDC数据预测,预计2026年中国人工智能软件及应用市场规模会达到211亿美元。 数据、算法、算力是AI发展的驱动力,其中数据是AI发展的基石,中国的数据规模增长速度预期将领跑全球。 2024年《政府工…

【北京迅为】《i.MX8MM嵌入式Linux开发指南》-第三篇 嵌入式Linux驱动开发篇-第五十五章 Pinctrl和GPIO子系统实验

i.MX8MM处理器采用了先进的14LPCFinFET工艺,提供更快的速度和更高的电源效率;四核Cortex-A53,单核Cortex-M4,多达五个内核 ,主频高达1.8GHz,2G DDR4内存、8G EMMC存储。千兆工业级以太网、MIPI-DSI、USB HOST、WIFI/BT…

基于opencv的答题卡识别

文章目录 一、背景需求二、处理步骤图片预处理检测到答题卡轮廓透视变换找每个圆圈的轮廓轮廓排序判断是否答题正确 一、背景需求 传统的手动评分方法耗时且容易出错,自动化评分可以可以显著提高评分过程的速度和准确性、减少人工成本。 答题卡图片处理效果如下&am…

dockerfile部署wordpress

1.将容器直接提交成镜像 [rootlocalhost ~]# docker commit 8ecc7f6b9c12 nginx:1.1 sha256:9a2bb94ba6d8d952527df616febf3fbc8f842b3b9e28b7011b50c743cd7b233b [rootlocalhost ~]# docker images REPOSITORY TAG IMAGE ID CREATED SIZE nginx …

javafx的ListView代入项目的使用

目录 1. 创建一个可观察的列表,用于存储ListView中的数据,这里的User是包装了用户的相关信息。 2.通过本人id获取friendid,及好友的id,然后用集合接送,更方便直观一点。 3.用for遍历集合,逐个添加。 4.渲染器&…

【我的养猪日记】区块链游戏

剧情介绍 年少无知留给了故乡,谦卑有礼送给了远方,有工作的地方没家,有家的地方没工作,他乡留不下灵魂,故乡安不了肉身,从此便有了漂泊。在外漂泊数年的你每天过着,挤不完的公交地铁、交不完的房…

面试场景题系列--(2)短 URL 生成器设计:百亿短 URL 怎样做到无冲突?--xunznux

文章目录 面试场景题:短 URL 生成器设计:百亿短 URL 怎样做到无冲突?1. 需求分析2. 短链接生成算法2.1 自增法2.2 散列函数法2.3 预生成法 3. 部署模型3.1 其他部署方案 4. 设计4.1 重定向响应码4.2 短 URL 预生成文件及预加载4.3 用户自定义…

EtherNet/IP转Profinet协议网关(经典配置案例)

怎么样才能把EtherNet/IP和Profinet网络连接起来呢?这几天有几个朋友问到了这个问题,作者在这里统一为大家详细说明一下。其实有一个设备可以很轻松地解决这个问题,名为JM-PN-EIP,下面是详细介绍。 一,设备主要功能 1、捷米特J…

AnyMP4 Data Recovery for Mac v1.5.8免激活版:高效数据恢复新选择

AnyMP4 Data Recovery for Mac是一款专为Mac用户设计的高效数据恢复软件,凭借其强大的功能和简洁的操作界面,为用户提供了快速、安全的数据恢复体验。 该软件支持恢复多种文件类型,包括照片、视频、音频、文档等,无论是常见的图片…

前端学习7——自学习梳理

​​​​​​jQuery 教程 | 菜鸟教程jQuery 教程 jQuery 是一个 JavaScript 库。 jQuery 极大地简化了 JavaScript 编程。 jQuery 很容易学习。 本章节的每一篇都包含了在线实例 通过本站的在线编辑器,你可以在线运行修改后的代码,并查看运行结果。 实例…

【Python正则表达式】:文本解析与模式匹配

文章目录 1.正则表达式2. re模块3.修饰符3.元字符3-1 字符匹配元字符3-2 重复次数限定元字符3-3 字符集合匹配元字符3-4 分组元字符3-5 边界匹配元字符3-6 字符类别匹配元字符 4.技巧4-1 贪婪与非贪婪 5.案例 1.正则表达式 正则表达式面向什么样的问题? 1、判断一个…

uniapp引入自定义图标

目录 一、选择图标,加入购物车 二、下载到本地 三、导入项目 四、修改字体引用路径 五、开始使用 这里以扩展iconfont图标为例 官网:iconfont-阿里巴巴矢量图标库 一、选择图标,加入购物车 二、下载到本地 直接点击下载素材&#xff0…

2019数字经济公测大赛-VMware逃逸

文章目录 环境搭建漏洞点exp 环境搭建 ubuntu :18.04.01vmware: VMware-Workstation-Full-15.5.0-14665864.x86_64.bundle 这里环境搭不成功。。patch过后就报错,不知道咋搞 发现可能是IDA加载后的patch似乎不行对原来的patch可能有影响,重新下了patch&…

【Kettle实现神通(数据库)MPP增量、全量数据ETL,同步任务Linux运行(通用)】

1、背景介绍 具体Kettle操作步骤不做过多介绍,主要技术方案说明,Kettle8.2版本放在底部链接提取,本次采用Kettle实现源端:神通数据通用库、目标端:神通MPP增量数据同步,并在服务器端运行Job。 2、windows…

鸿蒙OpenHarmony Native API【支持的标准库+Node_API】

Native API中支持的标准库 简介 表1 OpenHarmony支持的标准库 名称简介标准C库[libc、libm、libdl]组合实现C11标准C库。标准C库[libc]是C标准库的一种实现。OpenSL ES[OpenSL ES]是一个嵌入式跨平台的音频处理库。zlib[Zlib]是基于C/C语言实现的一个通用的数据压缩库。EGL[…

VMare centos 7 设置固定ip

第一步获取网关 查看虚拟机的网关-》编辑-》虚拟网络编辑器 NAT模式-》NAT设置 获取网关IP 192.168.70.2 第二步获取主机dns1 在本地主机获取dns1,本地主机调出cmd输入ipconfig dns1为192.168.31.1 用管理员权限的账号进入需要设置固定ip的虚拟机,在t…

零基础学习Python(四)

1. __getitem__、__setitem__、__iter__、__next__魔法方法 __index__方法是对象被作为索引访问时调用的魔法方法,那么当对象要进行索引访问时,调用什么魔法方法呢?答案是__getitem__魔法方法。 class C:def __getitem__(self, index):prin…