基于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.mzph.cn/diannao/51595.shtml

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

相关文章

ChatGPT秘籍:如何用AI阅读文献,提升你的学术效率

在当今信息泛滥的时代,迅速高效地搜集与处理信息显得尤为关键。本文将聚焦于如何利用ChatGPT高效阅读文献与文档,并提供详尽的技巧、心得以及实用的指令和插件解析,助你充分发挥ChatGPT的潜能。无论你是学生、科研人员还是行业从业者&#xf…

雪花算法的一些问题解析

前言 最近做项目,有些老旧项目,需要生成分布式唯一ID,不允许重复,此时如果要对其他中间件和数据库依赖小,那么就需要一套固定的ID生成规则,雪花算法就正当合适,当时Twitter就是用来存储数据库I…

JSP基础语法与指令

任何语言都有自己的语法&#xff0c;在java中有&#xff0c;JSP作为java技术的一种应用&#xff0c;它拥有一些自己扩充的语法(了解知道即可&#xff01;&#xff01;&#xff01;)&#xff0c; Java所有语法都支持&#xff01; JSP表达式 <html><head><title…

【Redis 初阶】初识 Redis

一、了解 Redis Redis 官网&#xff1a;Redis - The Real-time Data Platform Redis 是一种基于键值对&#xff08;key-value&#xff09;的 NoSQL 数据库。与很多键值对数据库不同的是&#xff0c;Redis 中的 key 都是 string&#xff08;字符串&#xff09;&#xff0c;值&a…

计算机毕业设计LSTM+Tensorflow股票分析预测 基金分析预测 股票爬虫 大数据毕业设计 深度学习 机器学习 数据可视化 人工智能

|-- 项目 |-- db.sqlite3 数据库相关 重要 想看数据&#xff0c;可以用navicat打开 |-- requirements.txt 项目依赖库&#xff0c;可以理解为部分技术栈之类的 |-- data 原始数据文件 |-- data 每个股票的模型保存位置 |-- app 主要代码文件夹 | |-- mod…

汽车辐射大?技术来救它:整车辐射抗扰发射天线仿真建模及性能预测

摘要 针对车辆电磁辐射抗扰度测试条件要求高、预测难度大的问题&#xff0c;通过仿真软件建立电磁抗扰度测试发射天线&#xff08;简称抗扰发射天线&#xff09;模型及无车情况下的电磁抗扰试验场强环境&#xff0c;为整车电磁辐射抗扰性能的预测搭建了一个仿真平台。 验证试验…

纹理映射学习笔记

概述 本文的纹理映射将三维曲面与二维的纹理建立对应关系。 曲面参数表达&#xff1a; x x ( s , t ) , y y ( s , t ) , z z ( s , t ) x x(s,t), y y(s,t), zz(s,t) xx(s,t),yy(s,t),zz(s,t) 即给定纹理坐标(s,t),我们能可以计算出曲面坐标(x,y,z) 映射 考虑由参数…

渲染技术如何帮助设计内容实现从平面到立体的转换

随着数字艺术和视觉特效的飞速发展&#xff0c;三维建模与渲染技术在影视、游戏、广告、工业设计、建筑可视化等多个领域展现出了其不可或缺的重要性。这一技术不仅实现了从平面到立体的跨越&#xff0c;还极大地丰富了视觉表达的层次感和真实感。 三维建模&#xff1a;构建虚…

ZYNQ 自定义IP端口映射

在做自定义IP时&#xff0c;对于总线接口&#xff0c;我们可以将其信号封装成接口&#xff0c;避免信号一个个地连接。在本实验中&#xff0c;需要封装axis slave接口&#xff0c;在Ports and Interfaces界面中&#xff0c;选择需要封装的信号&#xff0c;右键选择Add Bus Inte…

分享高效数据恢复工具:转转大师数据恢复软件等三款工具

哎&#xff0c;说起来都是泪啊&#xff0c;前阵子我那台陪伴了我无数个日夜的电脑&#xff0c;突然间就像跟我玩起了“躲猫猫”&#xff0c;一不留神&#xff0c;几个重要文件夹就这么悄无声息地“蒸发”了。心里那个急啊&#xff0c;就像热锅上的蚂蚁&#xff0c;团团转。好在…

Linux系统之部署记忆配对网页小游戏

Linux系统之部署记忆配对网页小游戏 一、小游戏介绍1.1 小游戏简介1.2 项目预览二、本次实践介绍2.1 本地环境规划2.2 本次实践介绍三、检查本地环境3.1 检查系统版本3.2 检查系统内核版本3.3 检查软件源四、安装Apache24.1 安装Apache2软件4.2 启动apache2服务4.3 查看apache2…

【中项第三版】系统集成项目管理工程师 | 第 11 章 规划过程组⑥ | 11.15 - 11.17

前言 第11章对应的内容选择题和案例分析都会进行考查&#xff0c;这一章节属于10大管理的内容&#xff0c;学习要以教材为准。本章上午题分值预计在15分。 目录 11.15 规划资源管理 11.15.1 主要输入 11.15.2 主要工具与技术 11.15.3 主要输出 11.16 估算活动资源 11.1…

向有结果的人学习

有个朋友问我&#xff1a;我向有结果的人学习了&#xff0c;为何没有拿到结果&#xff1f;我觉得这个问题比较有代表性&#xff0c;决定写篇文章说说自己的看法。 现在比较流行一句话&#xff1a;向有结果的人学习。这句话本身没毛病&#xff0c;向有结果的人学习那是一定的&am…

Animate基本概念:补间动画

补间动画是Animate软件中比较重要的组成部分。 举例来说&#xff0c;假设第 1 帧和第 20 帧是属性关键帧&#xff0c;可以将舞台左侧的一个元件放在第 1 帧中&#xff0c;然后将其移至舞台右侧的第 20 帧中。在创建补间时&#xff0c;Animate 将计算影片剪辑在此中间的所有位置…

AI驱动的个性化招聘策略:重塑人才选拔的未来

一、引言 随着科技的飞速发展&#xff0c;人工智能&#xff08;AI&#xff09;已渗透到各行各业&#xff0c;为企业带来了前所未有的变革。在人力资源管理领域&#xff0c;AI的应用同样不容忽视。特别是在招聘环节&#xff0c;AI技术的引入不仅提高了效率&#xff0c;更通过数据…

coreDNS

1.概述 coreDNS的作用主要是作为DNS服务器&#xff0c;在集群内提供服务发现功能&#xff0c;也就是服务之间的互相定位的过程。他监听集群中service和pod的创建和销毁事件&#xff0c;当serivice或者pod被创建时&#xff0c;记录对应的解析记录。当其他pod通过域名来访问集群中…

css实现线条中间高亮,左右两边模糊(linear-gradient的运用)

效果&#xff1a; <div class"line"></div> .line {height: 1px;background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, #a9c2ff 50%, rgba(255, 255, 255, 0) 100%);border-radius: 4px 4px 4px 4px; } CSS实现边框底部渐变色的方法:(最简单…

如何开发属于自己直播平台的主播美颜SDK?

本篇文章&#xff0c;笔者将从需求分析、技术选型、开发流程等方面进行详细讲解。 一、需求分析 在开发美颜SDK之前&#xff0c;首先需要进行详细的需求分析。主要包括以下几个方面&#xff1a; 1.美颜功能的具体需求&#xff1a;确定美颜效果&#xff0c;包括磨皮、美白、瘦…

Go语言实战:基于Go1.19的站点模板爬虫技术解析与应用

一、引言 1.1 爬虫技术的背景与意义 在互联网高速发展的时代&#xff0c;数据已经成为新的石油&#xff0c;而爬虫技术则是获取这种“石油”的重要工具。爬虫&#xff0c;又称网络蜘蛛、网络机器人&#xff0c;是一种自动化获取网络上信息的程序。它广泛应用于搜索引擎、数据分…