大文件上传的解决办法~文件切片、秒传、限制文件并发请求。。。
1、项目背景:针对大文件上传,如果将文件作为一个请求去发送给后端,会有以下几种问题,首先是上传时间长,用户不能进行其他操作,包括页面刷新等操作,其次有的接口会设置响应时间限制,可能大文件还没上传完就触发响应限制了,这样对用户很不友好,那么怎么解决呢?
2、首先前端针对大文件使用文件切片技术,将大文件切成多个小文件,然后再将多个小文件传给后端,由后端进行组合即可。(文件切片)
<template><div><input type="file" @change="handleUpload" /></div>
</template><script setup>
import { ref } from 'vue';
const file = ref(null);
const chunk_size=1024*1024//每一个切片的大小(1M)
const chunks=ref([])//存储所有的切片
//文件上传函数
const handleUpload= async (e) => {const selectedFile = e.target.files[0]; // 拿到选择的文件的 files 文件数据if (!selectedFile ) return;file.value = selectedFile;fileName.value= selectedFile.name//存储文件名调用文件切片函数chunks.value = createFileChunk ()调用hash函数const hash = await calculateHash()fileHash.value=hash//存储文件hash
}
//文件切片函数
const createFileChunk = () => {let cur = 0//分片的下标let fileChunkList=[]//接收所有的分片//开始遍历文件while(cur < file.value.size){const blob = file.value.slice(cur,cur+chunk_size)//这里使用slice()方法进行剪切,值为开始下标和结束下标fileChunkList.push(blob)cur+=chunk_size//更新下标}return fileChunkList//向外抛出所有的切片
}</script>
3、依据文件内容生成唯一的hash值,可以避免文件改名后重复上传的问题。
这里,我们使用 spark-md5.min.js 来根据文件的二进制内容计算文件的 hash值。用来实现秒传
引入spark-md5.min.js
import SparkMD5 from 'spark-md5'
//计算文件hash值
const calculateHash = () => {return Promise(resolve=>{1、第一个和最后一个切片全部参与计算。2、中间的切片只计算前面2个字节、中间2个字节、最后2给字节。const targets:Blob=[]//存储所有参与计算的切片const spark=new SparkMD5.ArrayBuffer()const fileReader=new FileReader()chunks.value.forEach((chunk,index)=>{if(index===0 || index===chunks.length-1){1、第一个和最后一个切片全部参与计算。targets.push(chunk)} else{2、中间的切片只计算前面2个字节、中间2个字节、最后2给字节。targets.push(chunk.slice(0,2)//前面2个字节targets.push(chunk.slice(chunk_size/2,chunk_size/2+2)//中间2个字节targets.push(chunk.slice(chunk_size-2,chunk_size)//后面2个字节}})fileReader.readAsArrayBuffer(new Blob(targets))fileReader.onload=(e)=>{spark.append((e.target as FileReader).result)console.log('hash值',spark.end())resolve(spark.end())}})
}
4、前面我们完成了文件上传的准备工作,下面写文件上传:
const fileHash = ref('');
const fileName = ref('');const uploadChunks = async (chunks: Blob[]) => {const data = chunks.map((chunk, index) => {return {fileHash: fileHash.value, // 文件hashchunkHash: `${fileHash.value}-${index}`, // 文件切片hashchunk};});const formDatas = data.map(item => {const formData = new FormData();formData.append('chunk', item.chunk);formData.append('chunkHash', item.chunkHash);formData.append('fileHash', item.fileHash);return formData;});const max = 6; // 最大并发请求数let index = 0;const taskpool: Promise<Response>[] = []; // 请求池(当前正在处理的请求)while (index < formDatas.length || taskpool.length > 0) { // 代表文件未上传完或仍有请求在处理if (index < formDatas.length) {const task = fetch('upload', { method: 'POST', body: formDatas[index] }); // 发送请求taskpool.push(task); // 将新的请求(Promise)添加到 taskpool 中index++;}if (taskpool.length >= max) {const completedTask = await Promise.race(taskpool); // 等待 taskpool 中任意一个请求完成,然后继续循环taskpool.splice(taskpool.indexOf(completedTask), 1); // 将已完成的请求从任务池中移除}}await Promise.all(taskpool); // 确保所有请求都已完成
};
相关文章:
大文件上传的解决办法~文件切片、秒传、限制文件并发请求。。。
1、项目背景:针对大文件上传,如果将文件作为一个请求去发送给后端,会有以下几种问题,首先是上传时间长,用户不能进行其他操作,包括页面刷新等操作,其次有的接口会设置响应时间限制,可…...
如何在日常工作中使用AI
### 如何在日常工作中使用AI:提高效率与创造力 随着人工智能(AI)技术的不断发展,它已经成为我们日常工作的重要助手。无论是在准备演示文稿、进行知识搜索还是寻求技术支持方面,AI都能够提供有力的支持。本文将探讨如何…...
计算机网络 (47)应用进程跨越网络的通信
前言 计算机网络应用进程跨越网络的通信是一个复杂而关键的过程,它涉及多个层面和组件的协同工作。 一、通信概述 计算机网络中的通信,本质上是不同主机中的应用进程之间的数据交换。为了实现这种通信,需要借助网络协议栈中的各层协议&#x…...
医疗集群系统中基于超融合数据库架构的应用与前景探析
一、引言 1.1 研究背景与意义 随着医疗信息化的飞速发展,医疗数据呈爆炸式增长。从日常诊疗记录、患者病历,到各类医疗影像、检查检验数据等,海量信息不断涌现。据统计,医疗数据的年增长率高达 30% 以上 ,2025 年,全球医疗数据量将达到 2314 艾字节(EB)。如此庞大的数…...
2024年度推进可解释人工智能迈向类人智能讨论总结分享
目录 一、探索“可解释人工智能”:AI如何从“黑箱”走向“透明大师” 二、走进可解释人工智能:让AI的决策变得透明 (一)几种常见的特征导向方法 (二)像素级方法 1. 层次相关传播(LRP&#…...
【Unity】使用Canvas Group改变UI的透明度
目录 一、前言二、Canvas Group三、结合DOTween达到画面淡进的效果 一、前言 在平时开发中,可以通过控制材质、Color改变UI透明度,除此之外还可以CanvasGroup组件来控制透明度。 二、Canvas Group 官方文档链接👉👉 点击进入 …...
【北京迅为】iTOP-4412全能版使用手册-第八十七章 安装Android Studio
iTOP-4412全能版采用四核Cortex-A9,主频为1.4GHz-1.6GHz,配备S5M8767 电源管理,集成USB HUB,选用高品质板对板连接器稳定可靠,大厂生产,做工精良。接口一应俱全,开发更简单,搭载全网通4G、支持WIFI、蓝牙、…...
小例Java结合Spring框架和MyBatis ORM来实现 ERP项目中实现读写分离
前记:大家带着挑剔的眼光,多多批判和指正!🙏 在ERP项目中实现读写分离,我们可以使用Java结合Spring框架和MyBatis ORM来实现。以下是一个简化的例子,展示了如何在ERP项目中配置和使用读写分离。 一、项目…...
.gitignore配置忽略out目录
文章目录 说明操作 说明 可以结合IDEA可视化操作git,只要不删除远程仓库,如果本地操作项目出现错误,可以直接修改远程仓库的.gitignore文件,并重新拉取项目到本地。 操作 在项目根目录下找到 .gitignore 文件,打开并…...
mac 安装mongodb
本文分享2种mac本地安装mongodb的方法,一种是通过homebrew安装,一种是通过tar包安装 homebrew安装 brew tap mongodb/brew brew upate brew install mongodb-community8.0tar包安装 安装mongodb 1.下载mongodb社区版的tar包 mongdb tar包下载地址 2…...
向harbor中上传镜像(向harbor上传image)
向 Harbor 中上传镜像通常分为以下几个步骤: 1、登录 Harbor 2、构建镜像 3、标记镜像 4、推送镜像到 Harbor 仓库 1、登录 Harbor 首先,确保你已经能够访问 Harbor,并且已经注册了账户。如果还没有 Harbor 账户,你需要先注册一…...
项目太大导致 git clone 失败
git克隆也分深浅,大项目clone可以先用浅克隆,只克隆源代码和最新的提交记录。 具体分两步: 1. 浅克隆 git clone https://github.com/google/mydemo.git --depth 1 只会克隆最新的一次提交,没有历史记录, 2. 拉取剩…...
开发神器之cursor
文章目录 cursor简介主要特点 下载cursor页面的简单介绍切换大模型指定ai学习的文件指定特定的代码喂给ai创建项目框架文件 cursor简介 Cursor 是一款专为开发者设计的智能代码编辑器,集成了先进的 AI 技术,旨在提升编程效率。以下是其主要特点和功能&a…...
Python爬虫学习前传 —— Python从安装到学会一站式服务
早上好啊,大佬们。我们的python基础内容的这一篇终于写好了,啪唧啪唧啪唧…… 说实话,这一篇确实写了很久,一方面是在忙其他几个专栏的内容,再加上生活学业上的事儿,确实精力有限,另一方面&…...
MySQL触发器:概念、作用
MySQL触发器:概念、作用与问题解决 在MySQL数据库管理系统中,触发器是一项强大且实用的功能。它为数据库的操作提供了一种自动化响应机制,在许多场景下极大地提升了数据管理的效率和数据的完整性。本文将深入探讨MySQL触发器是什么ÿ…...
ASP.NET Core 中基于 Cookie 的身份鉴权实现
在 ASP.NET Core 应用中,基于 Cookie 的身份鉴权是一种常见的身份验证方式,特别适用于传统的 Web 应用程序。Cookie 能够在用户的浏览器中存储身份验证数据,从而在用户访问应用的不同页面时保持登录状态。 一、配置 Cookie 身份验证 首先&a…...
从玩具到工业控制--51单片机的跨界传奇【3】
在科技的浩瀚宇宙中,51 单片机就像一颗独特的星辰,散发着神秘而迷人的光芒。对于无数电子爱好者而言,点亮 51 单片机上的第一颗 LED 灯,不仅仅是一次简单的操作,更像是开启了一扇通往新世界的大门。这小小的 LED 灯&am…...
Java算法 二叉树入门 力扣简单题相同的树 翻转二叉树 判断对称二叉树 递归求二叉树的层数
目录 模版 先序遍历 中序遍历 后序遍历 力扣原题 相同的二叉树 力扣原题 翻转二叉树 遍历树的层数 题目 静态变量 核心逻辑 模版 // 二叉树public static class Node{public int value;public Node left;public Node right;public Node(int v) {valuev;}} 先序遍历 …...
麒麟操作系统服务架构保姆级教程(十二)keepalived高可用
如果你想拥有你从未拥有过的东西,那么你必须去做你从未做过的事情 随着业务的扩大,服务器集群也越来越大,用户多了起来就要保证用户访问,服务绝对不能宕机,那么这个时候咱们除了做灾备以外,负载均衡服务器会…...
docker 部署confluence
1.安装docker的过程就不说了。 2.下载镜像。 docker pull cptactionhank/atlassian-confluence:7.4.0 docker images 3.下载pojie 包。 https://download.csdn.net/download/liudongyang123/90285042https://download.csdn.net/download/liudongyang123/90285042 4.编写do…...
【English-Book】Go in Action目录页翻译中文
第8页 内容 前言 xi 序言 xiii 致谢 xiv 关于本书 xvi 关于封面插图 xix 1 介绍 Go 1 1.1 用 Go 解决现代编程挑战 2 开发速度 3 • 并发 3 • Go 的类型系统 5 内存管理 7 1.2 你好,Go 7 介绍 Go 玩具 8 1.3 总结 8 2 Go 快速入门 9 2.1 程序架构 10 2.2 主包 …...
奉加微PHY6230兼容性:部分手机不兼容
从事嵌入式单片机的工作算是符合我个人兴趣爱好的,当面对一个新的芯片我即想把芯片尽快搞懂完成项目赚钱,也想着能够把自己遇到的坑和注意事项记录下来,即方便自己后面查阅也可以分享给大家,这是一种冲动,但是这个或许并不是原厂希望的,尽管这样有可能会牺牲一些时间也有哪天原…...
SSE 实践:用 Vue 和 Spring Boot 实现实时数据传输
前言 大家好,我是雪荷。最近我在灵犀 BI 项目中引入了 SSE 技术,以保证图表的实时渲染,当图表渲染完毕服务端推送消息至浏览器端触发重新渲染。 什么是 SSE? SSE 全称为 Server-Send Events 意思是服务端推送事件。 SSE 相比于 …...
HJ3 明明的随机数(Java版)
一、试题地址 明明的随机数_牛客题霸_牛客网 二、试题内容 描述 对于明明生成的 nn 个 11 到 500500 之间的随机整数,你需要帮助他完成以下任务: 删去重复的数字,即相同的数字只保留一个,把其余相同的数去掉;然后…...
C++ 模拟真人鼠标轨迹算法 - 防止游戏检测
一.简介 鼠标轨迹算法是一种模拟人类鼠标操作的程序,它能够模拟出自然而真实的鼠标移动路径。 鼠标轨迹算法的底层实现采用C/C语言,原因在于C/C提供了高性能的执行能力和直接访问操作系统底层资源的能力。 鼠标轨迹算法具有以下优势: 模拟…...
Linux-----线程同步(条件变量)
目录 相关API restrict关键字 线程间条件切换函数 条件变量pthread_cond_t 案例 在前面的锁的基础上进一步提高线程同步效率,也就是两个线程只用锁去执行的话依然会存在资源竞争的情况,也就是抢锁,这里就需要在锁的这边加上限制…...
58,【8】BUUCTF [PwnThyBytes 2019]Baby_SQL1
进入靶场 和2次注入的页面很像 不过养成查看源代码的好习惯 先访问source.zip 下载后解压,发现两个文件 第一个文件夹打开又有4个PHP文件 那还是先看index.php文件好了 有PHP和HTML两部分,下面是PHP部分代码(HTML太长了,先放一…...
小汽车维修记录程序(PC版)
我需要一个小程序,记录我的小车保养相关的情况:时间,地点,某种零件,以什么价格被保养使用。这样我才能清楚的知道我的小车下一次保养,然后我可以有的放矢的去准备下一次的零件和时间,避免过度保…...
回顾2024年在CSDN的成长
文章目录 我与CSDN的初次邂逅初学阶段的阅读CSDN:编程新手的避风港初学者的福音:细致入微的知识讲解考试复习神器:技术总结的“救命指南”曾经的自己:为何迟迟不迈出写博客的第一步兴趣萌芽:从“读”到“想写”的初体验…...
AI编程工具使用技巧——通义灵码
活动介绍通义灵码1. 理解通义灵码的基本概念示例代码生成 2. 使用明确的描述示例代码生成 3. 巧妙使用注释示例代码生成 4. 注意迭代与反馈原始代码反馈后生成优化代码 5. 结合生成的代码进行调试示例测试代码 其他功能定期优化生成的代码合作与分享结合其他工具 总结 活动介绍…...
解读InnoDB数据库索引页与数据行的紧密关联
目录 一、快速走进索引页结构 (一)整体展示说明 (二)内容说明 File Header(文件头部) Page Header(页面头部) Infimum Supremum(最小记录和最大记录) …...
KubeSphere 与 Pig 微服务平台的整合与优化:全流程容器化部署实践
一、前言 近年来,为了满足越来越复杂的业务需求,我们从传统单体架构系统升级为微服务架构,就是把一个大型应用程序分割成可以独立部署的小型服务,每个服务之间都是松耦合的,通过 RPC 或者是 Rest 协议来进行通信,可以按照业务领域来划分成独立的单元。但是微服务系统相对…...
虚幻基础2:gameplay框架
能帮到你的话,就给个赞吧 😘 文章目录 ue框架:gameplay组成game modeactorcomponent player controllergame state 工作流程 ue框架:gameplay 组成 game mode 游戏类型和规则。可以控制游戏的开始与结束以及一些其他功能。 ac…...
在线base64转码工具
在线base64转码工具,无需登录,无需费用,用完就走。 官网地址: https://base64.openai2025.com 效果:...
2024年,我的技术探索与成长之路
2024年,我的技术探索与成长之路 2024年已经过去,作为一名技术爱好者和写作者,我回顾了过去一年在博客上记录的点滴,感慨良多。这一年,我不仅见证了技术的飞速发展,也在不断学习和实践中找到了自己的成长方向…...
【逆境中绽放:万字回顾2024我在挑战中突破自我】
🌈个人主页: Aileen_0v0 🔥热门专栏: 华为鸿蒙系统学习|计算机网络|数据结构与算法 💫个人格言:“没有罗马,那就自己创造罗马~” 文章目录 一、引言二、个人成长与盘点情感与心理成长学习与技能提升其它荣誉 三、年度创作历程回顾创作内容概…...
图谱之前端关系应用
文章目录 图谱之前端关系应用(relation-graph、d3.js、echarts)1. relation-graph应用实例优缺点 2. d3.js应用实例优缺点 3. echarts应用实例优缺点 总结 图谱之前端关系应用(relation-graph、d3.js、echarts) 1. relation-grap…...
Kibana:ES|QL 编辑器简介
作者:来自 Elastic drewdaemon ES|QL 很重要 💪 正如你可能已经听说的那样,ES|QL 是 Elastic 的新查询语言。我们对 ES|QL 寄予厚望。它已经很出色了,但随着时间的推移,它将成为与 Elasticsearch 中的数据交互的最强大…...
建造者模式(或者称为生成器(构建器)模式)
一、什么是建造者模式? 将复杂对象的构建与表示进行分离,使得统一的构建过程,可以创建出不同的对象表现模式 就是将复杂对象里面的成员变量,设置不同的值,使得生成出来的对象拥有不同的属性值; 二、特点…...
【CTFHub】SQL注入cookie注入及知识点
打开题目页面如下 根据提示应该在cookie处注入,通过burp suite抓包并发到重放器 知识点 Cookie 是存储在用户本地计算机上的小文件,由 Web 服务器通过 HTTP 协议发送给浏览器,并保存在用户的浏览器端。当用户再次访问该网站时,浏…...
CSS中样式继承+优先级
继承属性和非继承属性 一、定义及分类 1、继承属性是指在父元素上设置了这些属性后,子元素会自动继承这些属性的值,除非子元素显式地设置了不同的值。 常见的继承属性: 字体 font 系列文本text-align text-ident line-height letter-spacing颜色 col…...
[leetcode](找到vector中的特定元素并删除)无重复字符的最长子串
一.找到vector中的特定元素并删除 #include <iostream> #include <vector> #include <algorithm> int main() { // 示例 vector std::vector<int> vec {1, 2, 3, 4, 5, 6}; // 要删除的元素 int aim 3; // 查找元素 auto it std::fin…...
记录一次 centos 启动失败
文章目录 现场1分析1现场2分析2搜索实际解决过程 现场1 一次断电,导致 之前能正常启动的centos 7.7 起不来了有部分log , 关键信息如下 [1.332724] XFS(sda3): Internal error xfs ... at line xxx of fs/xfs/xfs_trans.c [1.332724] XFS(sda3): Corruption of in-memory data…...
Linux使用SSH连接GitHub指南
基础配置流程 步骤1:生成SSH密钥 打开终端:首先,打开你的Linux终端。 生成SSH密钥对:输入以下命令来生成一个新的SSH密钥对: ssh-keygen -t rsa -b 4096 -C "your_email@example.com"-t rsa:使用RSA加密算法生成密钥。-b 4096:密钥长度为4096位,增加安全性。…...
QModbusTCPClient占用内存持续增长
最近使用QModbusTCPClient通信,需要频繁发送读写请求,发现软件占用内存一直在增减,经过不断咨询和尝试,终于解决了。 1.方案一(失败) 最开始以为是访问太频繁,导致创建reply的对象比delete re…...
具体场景的 MySQL 与 redis 数据一致性设计
场景1: 短视频修改名称,简介等视频数据更新还是清除更新策略如何设计?热 key 处理其他处理自己的数据查询 其他问题冷热突变/突然的热 key 加入如果产品要更新后能所有用户立马看到效果怎么办 ? 场景2: 抢红包如何设计?限制红包的数量 分布式锁的自旋问题 场景 3: 更改用户主…...
机器学习之SVD奇异值分解实现图片降维
SVD奇异值分解实现图片降维 目录 SVD奇异值分解实现图片降维1 SVD奇异值分解1.1 概念1.2 基本步骤1.2.1 矩阵分解1.2.2 选择奇异值1.2.3 重建矩阵1.2.4 降维结果 1.3 优缺点1.3.1 优点1.3.2 缺点 2 函数2.1 函数导入2.2 函数参数2.3 返回值2.4 通过 k 个奇异值降维 3 实际测试3…...
基于.Net Core+Vue的文件加密系统
1系统架构图 2 用例图 管理员角色的用例: 文件分享大厅:管理员可以访问文件分享大厅,下载文件。个人信息管理:管理员可以更新自己的个人信息,修改密码。用户管理:管理员负责创建、更新或删除用户账户&…...
数据结构(链表 哈希表)
在Python中,链表和哈希表都是常见的数据结构,可以用来存储和处理数据。 链表是一种线性数据结构,由一系列节点组成,每个节点包含一个数据元素和一个指向下一个节点的指针。链表可以用来实现栈、队列以及其他数据结构。Python中可…...
1161 Merging Linked Lists (25)
Given two singly linked lists L1a1→a2→⋯→an−1→an and L2b1→b2→⋯→bm−1→bm. If n≥2m, you are supposed to reverse and merge the shorter one into the longer one to obtain a list like a1→a2→bm→a3→a4→bm−1⋯. For ex…...