【VUE】前端阿里云OSS断点续传，分片上传

news2024/11/26 18:51:41

什么是OSS：

数据以对象（Object）的形式存储在OSS的存储空间（Bucket ）中。如果要使用OSS存储数据，您需要先创建Bucket，并指定Bucket的地域、访问权限、存储类型等属性。创建Bucket后，您可以将数据以Object的形式上传到Bucket，并指定Object的文件名（Key）作为其唯一标识。

分片上传：

在上传大文件（超过5 GB）到OSS的过程中，如果出现网络中断、程序异常退出等问题导致文件上传失败，您需要使用分片上传的方式上传大文件。分片上传通过将待上传的大文件分成多个较小的碎片（Part），充分利用网络带宽和服务器资源并发上传多个Part，加快上传完成时间，并在Part上传完成之后调用CompleteMultipartUpload接口将这些Part组合成一个完整的Object。

断点续传上传：

在上传大文件（超过5 GB）到OSS的过程中，如果出现网络中断、程序异常退出等问题导致文件上传失败，甚至重试多次仍无法完成上传，您需要使用断点续传上传的方式。断点续传上传将需要上传的大文件分成多个较小的分片并发上传，加速上传完成时间。如果上传过程中，某一分片上传失败，再次上传时会从Checkpoint文件记录的断点继续上传，无需重新上传所有分片。上传完成后，所有分片将合并成完整的文件。

 一.验证服务端是否已有该文件、该文件是否已上传部分块？

点击上传文件→选择文件后→读取文件信息→计算MD5值→发送给服务器→查看服务器返回信息

 计算MD5:

import SparkMD5 from 'spark-md5';
			this.calculateMD5(files.raw, this.sliceSize)
				.then(async (md5) => {
					console.log(md5)
				})
				.catch((error) => {
					this.$message.error(error);
				});

		// md5 计算
		calculateMD5(file, chunkSize) {
			return new Promise((resolve, reject) => {
				const chunks = Math.ceil(file.size / chunkSize);
				let currentChunk = 0;
				const spark = new SparkMD5.ArrayBuffer();
				const fileReader = new FileReader();
				fileReader.onload = (e) => {
					spark.append(e.target.result); // 更新 MD5 值
					currentChunk++;
					if (currentChunk < chunks) {
						this.loadNextChunk(fileReader, currentChunk, chunkSize, file);
					} else {
						const md5 = spark.end(); // 计算最终 MD5 值
						resolve(md5);
					}
				};
				fileReader.onerror = function (e) {
					reject(e);
				};
				this.loadNextChunk(fileReader, currentChunk, chunkSize, file);
			});
		},
		// md5 计算
		loadNextChunk(fileReader, currentChunk, chunkSize, file) {
			const start = currentChunk * chunkSize;
			const end = Math.min(start + chunkSize, file.size);
			const chunk = file.slice(start, end);
			fileReader.readAsArrayBuffer(chunk);
		},

二 文件切块

			sliceSize: 1024 * 1024 * 2, // 分片上传-每片5MB
			fileBlockArr: [],


						_this.fileBlockArr = [];
						let blob = file.raw;
						const { size: fileSize, name: fileName } = blob;
						//计算文件切片总数，Math.ceil向上取整
						const totalSlice = Math.ceil(fileSize / _this.sliceSize);
						_this.chunktotle = totalSlice;
						for (let i = 0; i < totalSlice; i++) {
							let start = i * _this.sliceSize;
							let end = Math.min(fileSize, start + _this.sliceSize);
							let chunkBlob = blob.slice(start, end); // 直接使用slice方法分片Blob对象
							_this.fileBlockArr.push(chunkBlob);
						}

三 调用初始化接口

调用初始化接口，拿到部分参数后进行块上传

						const requestList = [];
						_this.fileBlockArr.forEach((item, index) => {
							if (index + 1 >= sliceNo) {
								const fn = () => {
									let data = new FormData();
									data.append('file', item);
									data.append('fileSlicesNum', totalSlice);
									data.append('sliceNo', index + 1);
									data.append('fileMD5', md5);
									data.append('resourceKey', _this.resourceKey);
									data.append('ossSlicesId', _this.ossSlicesId);
									data.append('fileSize', fileSize);
									return axios({
										url: process.env.VUE_APP_BASE_API + '/common/partUpload',
										method: 'post',
										data: data,
										headers: {
											Authorization: 'Bearer ' + getToken(),
											'Content-Type': 'multipart/form-data',
										},
									})
										.then((res) => {
											if (res.data.code === 200) {
												if (_this.percentCount === 0) {
													// 避免上传成功后会删除切片改变 chunkList 的长度影响到 percentCount 的值
													_this.percentCount = 100 / _this.fileBlockArr.length;
												}
												// _this.percent += _this.percentCount; // 改变进度
												_this.percent = res.data.progressPercent;
												_this.fileBlockArr.splice(index, 1); // 一旦上传成功就删除这一个 chunk，方便断点续传
											}
										})
										.catch((err) => {
											return Promise.reject(err);
										});
								};
								requestList.push(fn);
							}
						});
						let i = 0; // 记录发送的请求个数

四 上传与合并

						let i = 0; // 记录发送的请求个数

						const complete = () => {
							let completedData = {
								ossSlicesId: _this.ossSlicesId,
								resourceKey: _this.resourceKey,
								fileMD5: _this.md5,
							};
							completePart(completedData)
								.then((response) => {
									if (response.code == 200) {
										_this.form.versionUrl = response.data;
									}
								})
								.catch((error) => {
									console.log('completePart-error:', error);
								});
						};
						const send = async () => {
							if (i >= requestList.length) {
								complete();
								return;
							}
							await requestList[i]();
							i++;
							send();
						};
						send(); // 发送请求

全览

data(){
    return {
			sliceSize: 1024 * 1024 * 2, // 分片上传-每片5MB
			chunktotle: 0,
			percentCount: 0,
			percent: 0,
			md5: '',
			fileBlockArr: [],
			resourceKey: undefined,
			ossSlicesId: undefined,
			fileName: undefined,
            }
    },

methods:{
		uploadChange(files, fileList) {
			this.fileName = files.name;
			this.calculateMD5(files.raw, this.sliceSize)
				.then(async (md5) => {
					this.md5 = md5;
					// 分片验证
					let checkData = {
						fileMD5: this.md5,
					};
					continueUpload(checkData)
						.then((response) => {
							if (response.code === 200) {
								if (
									response.data !== null &&
									response.data.sliceNo < response.data.fileSlicesNum
								) {
									//已存在，但未上传完成 取已上传到的块信息
									this.resourceKey = response.data.resourceKey;
									this.ossSlicesId = response.data.ossSlicesId;
									let sliceNo = response.data.sliceNo;
									blockUpload(files, sliceNo + 1);
								} else if (
									response.data !== null &&
									response.data.sliceNo == response.data.fileSlicesNum
								) {
									// 上传完成待合并
									let completedData = {
										ossSlicesId: response.data.ossSlicesId,
										resourceKey: response.data.resourceKey,
										fileMD5: _this.md5,
									};
									mergePart(completedData);
								} else {
									// 未上传
									partInit({
										fileName: files.name,
										storageDirectory: 'internalApp',
									}).then((response) => {
										if (response.code === 200) {
											this.resourceKey = response.data.resourceKey;
											this.ossSlicesId = response.data.ossSlicesId;
											blockUpload(files, 0);
										}
									});
								}
							}
						})
						.catch((error) => {
							console.log('continueUpload-error:', error);
						});

					function mergePart(completedData) {
						completePart(completedData)
							.then((response) => {
								if (response.code == 200) {
									let fileData = {
										name: _this.fileName,
										url: response.data,
									};
									_this.fileList.push(fileData);
									_this.form.versionUrl = response.data;
								}
							})
							.catch((error) => {
								console.log('completePart-error:', error);
							});
					}

					let _this = this;
					function blockUpload(file, sliceNo) {
						_this.fileBlockArr = [];
						let blob = file.raw;
						const { size: fileSize, name: fileName } = blob;
						//计算文件切片总数，Math.ceil向上取整
						const totalSlice = Math.ceil(fileSize / _this.sliceSize);
						_this.chunktotle = totalSlice;
						for (let i = 0; i < totalSlice; i++) {
							let start = i * _this.sliceSize;
							let end = Math.min(fileSize, start + _this.sliceSize);
							let chunkBlob = blob.slice(start, end); // 直接使用slice方法分片Blob对象
							_this.fileBlockArr.push(chunkBlob);
						}
						const requestList = [];
						_this.fileBlockArr.forEach((item, index) => {
							if (index + 1 >= sliceNo) {
								const fn = () => {
									let data = new FormData();
									data.append('file', item);
									data.append('fileSlicesNum', totalSlice);
									data.append('sliceNo', index + 1);
									data.append('fileMD5', md5);
									data.append('resourceKey', _this.resourceKey);
									data.append('ossSlicesId', _this.ossSlicesId);
									data.append('fileSize', fileSize);
									return axios({
										url: process.env.VUE_APP_BASE_API + '/common/partUpload',
										method: 'post',
										data: data,
										headers: {
											Authorization: 'Bearer ' + getToken(),
											'Content-Type': 'multipart/form-data',
										},
									})
										.then((res) => {
											if (res.data.code === 200) {
												if (_this.percentCount === 0) {
													// 避免上传成功后会删除切片改变 chunkList 的长度影响到 percentCount 的值
													_this.percentCount = 100 / _this.fileBlockArr.length;
												}
												// _this.percent += _this.percentCount; // 改变进度
												_this.percent = res.data.progressPercent;
												_this.fileBlockArr.splice(index, 1); // 一旦上传成功就删除这一个 chunk，方便断点续传
											}
										})
										.catch((err) => {
											return Promise.reject(err);
										});
								};
								requestList.push(fn);
							}
						});
						let i = 0; // 记录发送的请求个数

						const complete = () => {
							let completedData = {
								ossSlicesId: _this.ossSlicesId,
								resourceKey: _this.resourceKey,
								fileMD5: _this.md5,
							};
							mergePart(completedData);
						};
						const send = async () => {
							if (i >= requestList.length) {
								complete();
								return;
							}
							await requestList[i]();
							i++;
							send();
						};
						send(); // 发送请求
					}
				})
				.catch((error) => {
					this.$message.error(error);
				});
		},
		// md5 计算
		calculateMD5(file, chunkSize) {
			return new Promise((resolve, reject) => {
				const chunks = Math.ceil(file.size / chunkSize);
				let currentChunk = 0;
				const spark = new SparkMD5.ArrayBuffer();
				const fileReader = new FileReader();
				fileReader.onload = (e) => {
					spark.append(e.target.result); // 更新 MD5 值
					currentChunk++;
					if (currentChunk < chunks) {
						this.loadNextChunk(fileReader, currentChunk, chunkSize, file);
					} else {
						const md5 = spark.end(); // 计算最终 MD5 值
						resolve(md5);
					}
				};
				fileReader.onerror = function (e) {
					reject(e);
				};
				this.loadNextChunk(fileReader, currentChunk, chunkSize, file);
			});
		},
		// md5 计算
		loadNextChunk(fileReader, currentChunk, chunkSize, file) {
			const start = currentChunk * chunkSize;
			const end = Math.min(start + chunkSize, file.size);
			const chunk = file.slice(start, end);
			fileReader.readAsArrayBuffer(chunk);
		},
}

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

嵌套循环实现九九乘法表

嵌套循环实现九九乘法表

大家好&#xff1a; 衷心希望各位点赞。 您的问题请留在评论区&#xff0c;我会及时回答。 案例描述 利用嵌套循环&#xff0c;实现九九乘法表。 代码 #include <iostream> #include <Windows.h>using namespace std;int main(void) {//外层循环执行一次&#…
阅读更多...
Samtec科普 | 一文了解患者护理应用连接器

Samtec科普 | 一文了解患者护理应用连接器

【摘要/前言】 通过医疗专业人士为患者提供护理的种种需求&#xff0c;已经不限于手术室与医院的各种安全状况。当今许多患者的护理都是在其他环境进行&#xff0c;例如医生办公室、健康中心&#xff0c;还有越来越普遍的住家。尤其是需要长期看护的患者&#xff0c;所需的科技…
阅读更多...
基于python高考志愿推荐系统设计与实现-flask-django-nodejs-php

基于python高考志愿推荐系统设计与实现-flask-django-nodejs-php

随着现代化的互联网技术的发展&#xff0c;目前&#xff0c;高考志愿推荐系统系统的设计还处在一个不断发展的时期&#xff0c;因此&#xff0c;它的要求也是相对苛刻的。 根据现实需要&#xff0c;此系统我们设计出一下功能&#xff0c;主要有以下功能模板。 语言&#xff1a…
阅读更多...
OpenCV C++ 图像处理实战 ——《物体数量计数与尺寸测量》

OpenCV C++ 图像处理实战 ——《物体数量计数与尺寸测量》

OpenCV C++ 图像处理实战 ——《物体数量计数与尺寸测量》 一、结果演示二、多尺度自适应Gamma矫正的低照度图像增强三、轮廓计算与尺寸测量3.1 图像二值化3.2 轮廓提取3.3 物体计数与尺寸测量四、源码测试图像下载总结一、结果演示 二、多尺度自
阅读更多...
Java vue 开源问卷调查系统 附项目地址

Java vue 开源问卷调查系统 附项目地址

开源问卷调查系统 平台简介 本项目旨在提供一个简单易用的问卷调查平台&#xff0c;帮助用户创建、分享问卷&#xff0c;并收集、分析调查数据。我们希望能够为各行各业的调查需求提供一种高效、便捷的解决方案。 项目特点 用户友好&#xff1a;清晰直观的用户界面&#xf…
阅读更多...
React Native: could not connect to development server

React Native: could not connect to development server

问题&#xff1a; 运行模拟器错误&#xff1a;无法连接到开发服务器 原因分析&#xff1a; 1、确认模拟器连接状态&#xff0c;是连接成功的 查看进程的端口占用&#xff0c;也没问题 lsof -i tcp:8081 kill pid2、检查包服务器是否运行正常 连接真机进行调试发现真机是正常…
阅读更多...
位运算(一)

位运算(一)

C语言是为描述系统而设计的,因此它应当具有汇编语言所能完成的一些功能。C语言既具有高级语言的特点,又具有低级语言的功能,因而具有广泛的用途和很强的生命力。本章将介绍的位运算就很适合于编写系统软件的需要,是 C语言的重要特色。在计算机用于检测和控制领域中要用到位运算…
阅读更多...
基于SpringBoot+Vue中小企业人事管理系统代码（源码+部署说明+演示视频+源码介绍）

基于SpringBoot+Vue中小企业人事管理系统代码（源码+部署说明+演示视频+源码介绍）

您好&#xff0c;我是码农飞哥&#xff08;wei158556&#xff09;&#xff0c;感谢您阅读本文&#xff0c;欢迎一键三连哦。&#x1f4aa;&#x1f3fb; 1. Python基础专栏&#xff0c;基础知识一网打尽&#xff0c;9.9元买不了吃亏&#xff0c;买不了上当。 Python从入门到精通…
阅读更多...
Visual Studio 2013 - 高亮设置括号匹配 (方括号)

Visual Studio 2013 - 高亮设置括号匹配 (方括号)

Visual Studio 2013 - 高亮设置括号匹配 [方括号] 1. 高亮设置 括号匹配 (方括号)References 1. 高亮设置 括号匹配 (方括号) 工具 -> 选项… -> 环境 -> 字体和颜色 References [1] Yongqiang Cheng, https://yongqiang.blog.csdn.net/
阅读更多...
Grok-1 ：目前参数最大的开源大模型

Grok-1 ：目前参数最大的开源大模型

在人工智能快速发展的自然语言处理领域中&#xff0c;xAI 正式发布了大模型 Grok-1&#xff0c;这是迄今参数量最大的开源大语言模型&#xff0c;标志着一个重要的里程碑。Grok-1 是一个拥有3140亿参数的专家混合模型&#xff0c;经过四个月的开发&#xff0c;以其创新的架构和…
阅读更多...
2024年中国酶制剂供需布局及市场发展现状

2024年中国酶制剂供需布局及市场发展现状

环洋咨询Global Info Research的酶制剂市场调研报告提供酶制剂市场的基本概况&#xff0c;包括定义&#xff0c;分类&#xff0c;应用和产业链结构&#xff0c;同时还讨论发展政策和计划以及制造流程和成本结构&#xff0c;分析酶制剂市场的发展现状与未来市场趋势&#xff0c;…
阅读更多...
阿里云99元服务器40G ESSD Entry系统盘够用吗？

阿里云99元服务器40G ESSD Entry系统盘够用吗？

阿里云99元服务器40G ESSD Entry云盘够用吗&#xff1f;够用&#xff0c;操作系统占15GB左右&#xff0c;还有25G富余。如果是40G ESSD Entry系统盘不够用&#xff0c;还可以为云服务器另外挂载数据盘&#xff0c;所以不用担心40G系统盘不够用。可以在阿里云CLUB中心查看 aliyu…
阅读更多...
第1章 初识 Python 背记手册

第1章 初识 Python 背记手册

1、print()—输出 print()函数的基本用法如下&#xff1a; print("输出的内容")其中&#xff0c;输出内容可以是数字和字符串&#xff08;使用引号括起来&#xff09;&#xff0c;此类内容将直接输出&#xff0c;也 可 以是包含运算符的表达式&#xff0c;此类内容…
阅读更多...
NSS [SWPUCTF 2022 新生赛]ez_ez_unserialize

NSS [SWPUCTF 2022 新生赛]ez_ez_unserialize

NSS [SWPUCTF 2022 新生赛]ez_ez_unserialize 开题&#xff0c;直接给了题目源码。 简单看了一下&#xff0c;题目告诉我们flag在哪&#xff0c;而且类中有高亮文件方法。怎么拿flag已经很明显了。关键点在于__weakup()魔术方法固定死了我们高亮的文件。所以这题只需要绕过__w…
阅读更多...
关于vue3的自定义hook

关于vue3的自定义hook

把一些逻辑写在单独的ts文件里&#xff0c;vue文件使用的时候引入即可 1、计算属性写出去 直接写出去的话&#xff0c;使用时报错 ExpirationTime是一个计算属性&#xff0c;若直接在html上使用{{ExpirationTime(orderForm报错)}} 查阅资料显示&#xff1a;在 setup 函数中&…
阅读更多...
docker入门（五）—— 小练习，docker安装nginx、elasticsearch

docker入门（五）—— 小练习，docker安装nginx、elasticsearch

练习 docker 安装 nginx # 搜素镜像 [rootiZbp15293q8kgzhur7n6kvZ home]# docker search nginx NAME DESCRIPTION STARS OFFICIAL nginx …
阅读更多...
适不适合跳过六西格玛绿带直接攻读六西格玛黑带？自我评估指南

适不适合跳过六西格玛绿带直接攻读六西格玛黑带？自我评估指南

六西格玛认证体系的设计初衷是逐步引领学习者深入掌握六西格玛的理论、工具和实践应用。从白带到大师黑带&#xff0c;每一步都旨在为学习者提供逐渐累积的学习经验和技能提升。然而&#xff0c;个人背景差异巨大&#xff0c;有的学习者可能因为其丰富的项目管理经验、质量管理…
阅读更多...
windows10 WSL启动Ubuntu虚拟机，安装DolphinScheduler

windows10 WSL启动Ubuntu虚拟机，安装DolphinScheduler

文章目录 1. 启动WSL与虚拟机2. 安装Docker与DolphinScheduler容器 1. 启动WSL与虚拟机 使用管理员权限运行命令&#xff1a; Enable-WindowsOptionalFeature -Online -FeatureName Microsoft-Windows-Subsystem-Linux重启后即可创建虚拟机 在Microsoft Store中搜索Ubuntu&…
阅读更多...
Python计算机二级选择易错题（一）

Python计算机二级选择易错题（一）

题目来源&#xff1a;python计算机二级真题&#xff08;选择题&#xff09; - 知乎 选择题第08&#xff0c;09套
阅读更多...
实操 | 从0到1教你用Python来爬取整站天气网

实操 | 从0到1教你用Python来爬取整站天气网

Scrapy Scrapy是Python开发的一个快速、高层次的屏幕抓取和web抓取框架&#xff0c;用于抓取web站点并从页面中提取结构化的数据。 一、安装scrapy 安装Twisted Twisted&#xff1a;为 Python 提供的基于事件驱动的网络引擎包。 在下面网址安装Twisted url:https://www.l…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023