当前位置: 首页 > news >正文

大文件上传的解决办法~文件切片、秒传、限制文件并发请求。。。

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、项目背景&#xff1a;针对大文件上传&#xff0c;如果将文件作为一个请求去发送给后端&#xff0c;会有以下几种问题&#xff0c;首先是上传时间长&#xff0c;用户不能进行其他操作&#xff0c;包括页面刷新等操作&#xff0c;其次有的接口会设置响应时间限制&#xff0c;可…...

如何在日常工作中使用AI

### 如何在日常工作中使用AI&#xff1a;提高效率与创造力 随着人工智能&#xff08;AI&#xff09;技术的不断发展&#xff0c;它已经成为我们日常工作的重要助手。无论是在准备演示文稿、进行知识搜索还是寻求技术支持方面&#xff0c;AI都能够提供有力的支持。本文将探讨如何…...

计算机网络 (47)应用进程跨越网络的通信

前言 计算机网络应用进程跨越网络的通信是一个复杂而关键的过程&#xff0c;它涉及多个层面和组件的协同工作。 一、通信概述 计算机网络中的通信&#xff0c;本质上是不同主机中的应用进程之间的数据交换。为了实现这种通信&#xff0c;需要借助网络协议栈中的各层协议&#x…...

医疗集群系统中基于超融合数据库架构的应用与前景探析

一、引言 1.1 研究背景与意义 随着医疗信息化的飞速发展,医疗数据呈爆炸式增长。从日常诊疗记录、患者病历,到各类医疗影像、检查检验数据等,海量信息不断涌现。据统计,医疗数据的年增长率高达 30% 以上 ,2025 年,全球医疗数据量将达到 2314 艾字节(EB)。如此庞大的数…...

2024年度推进可解释人工智能迈向类人智能讨论总结分享

目录 一、探索“可解释人工智能”&#xff1a;AI如何从“黑箱”走向“透明大师” 二、走进可解释人工智能&#xff1a;让AI的决策变得透明 &#xff08;一&#xff09;几种常见的特征导向方法 &#xff08;二&#xff09;像素级方法 1. 层次相关传播&#xff08;LRP&#…...

【Unity】使用Canvas Group改变UI的透明度

目录 一、前言二、Canvas Group三、结合DOTween达到画面淡进的效果 一、前言 在平时开发中&#xff0c;可以通过控制材质、Color改变UI透明度&#xff0c;除此之外还可以CanvasGroup组件来控制透明度。 二、Canvas Group 官方文档链接&#x1f449;&#x1f449; 点击进入 …...

【北京迅为】iTOP-4412全能版使用手册-第八十七章 安装Android Studio

iTOP-4412全能版采用四核Cortex-A9&#xff0c;主频为1.4GHz-1.6GHz&#xff0c;配备S5M8767 电源管理&#xff0c;集成USB HUB,选用高品质板对板连接器稳定可靠&#xff0c;大厂生产&#xff0c;做工精良。接口一应俱全&#xff0c;开发更简单,搭载全网通4G、支持WIFI、蓝牙、…...

小例Java结合Spring框架和MyBatis ORM来实现 ERP项目中实现读写分离

前记&#xff1a;大家带着挑剔的眼光&#xff0c;多多批判和指正&#xff01;&#x1f64f; 在ERP项目中实现读写分离&#xff0c;我们可以使用Java结合Spring框架和MyBatis ORM来实现。以下是一个简化的例子&#xff0c;展示了如何在ERP项目中配置和使用读写分离。 一、项目…...

.gitignore配置忽略out目录

文章目录 说明操作 说明 可以结合IDEA可视化操作git&#xff0c;只要不删除远程仓库&#xff0c;如果本地操作项目出现错误&#xff0c;可以直接修改远程仓库的.gitignore文件&#xff0c;并重新拉取项目到本地。 操作 在项目根目录下找到 .gitignore 文件&#xff0c;打开并…...

mac 安装mongodb

本文分享2种mac本地安装mongodb的方法&#xff0c;一种是通过homebrew安装&#xff0c;一种是通过tar包安装 homebrew安装 brew tap mongodb/brew brew upate brew install mongodb-community8.0tar包安装 安装mongodb 1.下载mongodb社区版的tar包 mongdb tar包下载地址 2…...

向harbor中上传镜像(向harbor上传image)

向 Harbor 中上传镜像通常分为以下几个步骤&#xff1a; 1、登录 Harbor 2、构建镜像 3、标记镜像 4、推送镜像到 Harbor 仓库 1、登录 Harbor 首先&#xff0c;确保你已经能够访问 Harbor&#xff0c;并且已经注册了账户。如果还没有 Harbor 账户&#xff0c;你需要先注册一…...

项目太大导致 git clone 失败

git克隆也分深浅&#xff0c;大项目clone可以先用浅克隆&#xff0c;只克隆源代码和最新的提交记录。 具体分两步&#xff1a; 1. 浅克隆 git clone https://github.com/google/mydemo.git --depth 1 只会克隆最新的一次提交&#xff0c;没有历史记录&#xff0c; 2. 拉取剩…...

开发神器之cursor

文章目录 cursor简介主要特点 下载cursor页面的简单介绍切换大模型指定ai学习的文件指定特定的代码喂给ai创建项目框架文件 cursor简介 Cursor 是一款专为开发者设计的智能代码编辑器&#xff0c;集成了先进的 AI 技术&#xff0c;旨在提升编程效率。以下是其主要特点和功能&a…...

Python爬虫学习前传 —— Python从安装到学会一站式服务

早上好啊&#xff0c;大佬们。我们的python基础内容的这一篇终于写好了&#xff0c;啪唧啪唧啪唧…… 说实话&#xff0c;这一篇确实写了很久&#xff0c;一方面是在忙其他几个专栏的内容&#xff0c;再加上生活学业上的事儿&#xff0c;确实精力有限&#xff0c;另一方面&…...

MySQL触发器:概念、作用

MySQL触发器&#xff1a;概念、作用与问题解决 在MySQL数据库管理系统中&#xff0c;触发器是一项强大且实用的功能。它为数据库的操作提供了一种自动化响应机制&#xff0c;在许多场景下极大地提升了数据管理的效率和数据的完整性。本文将深入探讨MySQL触发器是什么&#xff…...

ASP.NET Core 中基于 Cookie 的身份鉴权实现

在 ASP.NET Core 应用中&#xff0c;基于 Cookie 的身份鉴权是一种常见的身份验证方式&#xff0c;特别适用于传统的 Web 应用程序。Cookie 能够在用户的浏览器中存储身份验证数据&#xff0c;从而在用户访问应用的不同页面时保持登录状态。 一、配置 Cookie 身份验证 首先&a…...

从玩具到工业控制--51单片机的跨界传奇【3】

在科技的浩瀚宇宙中&#xff0c;51 单片机就像一颗独特的星辰&#xff0c;散发着神秘而迷人的光芒。对于无数电子爱好者而言&#xff0c;点亮 51 单片机上的第一颗 LED 灯&#xff0c;不仅仅是一次简单的操作&#xff0c;更像是开启了一扇通往新世界的大门。这小小的 LED 灯&am…...

Java算法 二叉树入门 力扣简单题相同的树 翻转二叉树 判断对称二叉树 递归求二叉树的层数

目录 模版 先序遍历 中序遍历 后序遍历 力扣原题 相同的二叉树 力扣原题 翻转二叉树 遍历树的层数 题目 静态变量 核心逻辑 模版 // 二叉树public static class Node{public int value;public Node left;public Node right;public Node(int v) {valuev;}} 先序遍历 …...

麒麟操作系统服务架构保姆级教程(十二)keepalived高可用

如果你想拥有你从未拥有过的东西&#xff0c;那么你必须去做你从未做过的事情 随着业务的扩大&#xff0c;服务器集群也越来越大&#xff0c;用户多了起来就要保证用户访问&#xff0c;服务绝对不能宕机&#xff0c;那么这个时候咱们除了做灾备以外&#xff0c;负载均衡服务器会…...

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 你好&#xff0c;Go 7 介绍 Go 玩具 8 1.3 总结 8 2 Go 快速入门 9 2.1 程序架构 10 2.2 主包 …...

奉加微PHY6230兼容性:部分手机不兼容

从事嵌入式单片机的工作算是符合我个人兴趣爱好的,当面对一个新的芯片我即想把芯片尽快搞懂完成项目赚钱,也想着能够把自己遇到的坑和注意事项记录下来,即方便自己后面查阅也可以分享给大家,这是一种冲动,但是这个或许并不是原厂希望的,尽管这样有可能会牺牲一些时间也有哪天原…...

SSE 实践:用 Vue 和 Spring Boot 实现实时数据传输

前言 大家好&#xff0c;我是雪荷。最近我在灵犀 BI 项目中引入了 SSE 技术&#xff0c;以保证图表的实时渲染&#xff0c;当图表渲染完毕服务端推送消息至浏览器端触发重新渲染。 什么是 SSE&#xff1f; SSE 全称为 Server-Send Events 意思是服务端推送事件。 SSE 相比于 …...

HJ3 明明的随机数(Java版)

一、试题地址 明明的随机数_牛客题霸_牛客网 二、试题内容 描述 对于明明生成的 nn 个 11 到 500500 之间的随机整数&#xff0c;你需要帮助他完成以下任务&#xff1a; 删去重复的数字&#xff0c;即相同的数字只保留一个&#xff0c;把其余相同的数去掉&#xff1b;然后…...

C++ 模拟真人鼠标轨迹算法 - 防止游戏检测

一.简介 鼠标轨迹算法是一种模拟人类鼠标操作的程序&#xff0c;它能够模拟出自然而真实的鼠标移动路径。 鼠标轨迹算法的底层实现采用C/C语言&#xff0c;原因在于C/C提供了高性能的执行能力和直接访问操作系统底层资源的能力。 鼠标轨迹算法具有以下优势&#xff1a; 模拟…...

Linux-----线程同步(条件变量)

目录 相关API restrict关键字 线程间条件切换函数 条件变量pthread_cond_t 案例 在前面的锁的基础上进一步提高线程同步效率&#xff0c;也就是两个线程只用锁去执行的话依然会存在资源竞争的情况&#xff0c;也就是抢锁&#xff0c;这里就需要在锁的这边加上限制&#xf…...

58,【8】BUUCTF [PwnThyBytes 2019]Baby_SQL1

进入靶场 和2次注入的页面很像 不过养成查看源代码的好习惯 先访问source.zip 下载后解压&#xff0c;发现两个文件 第一个文件夹打开又有4个PHP文件 那还是先看index.php文件好了 有PHP和HTML两部分&#xff0c;下面是PHP部分代码&#xff08;HTML太长了&#xff0c;先放一…...

小汽车维修记录程序(PC版)

我需要一个小程序&#xff0c;记录我的小车保养相关的情况&#xff1a;时间&#xff0c;地点&#xff0c;某种零件&#xff0c;以什么价格被保养使用。这样我才能清楚的知道我的小车下一次保养&#xff0c;然后我可以有的放矢的去准备下一次的零件和时间&#xff0c;避免过度保…...

回顾2024年在CSDN的成长

文章目录 我与CSDN的初次邂逅初学阶段的阅读CSDN&#xff1a;编程新手的避风港初学者的福音&#xff1a;细致入微的知识讲解考试复习神器&#xff1a;技术总结的“救命指南”曾经的自己&#xff1a;为何迟迟不迈出写博客的第一步兴趣萌芽&#xff1a;从“读”到“想写”的初体验…...

AI编程工具使用技巧——通义灵码

活动介绍通义灵码1. 理解通义灵码的基本概念示例代码生成 2. 使用明确的描述示例代码生成 3. 巧妙使用注释示例代码生成 4. 注意迭代与反馈原始代码反馈后生成优化代码 5. 结合生成的代码进行调试示例测试代码 其他功能定期优化生成的代码合作与分享结合其他工具 总结 活动介绍…...

解读InnoDB数据库索引页与数据行的紧密关联

目录 一、快速走进索引页结构 &#xff08;一&#xff09;整体展示说明 &#xff08;二&#xff09;内容说明 File Header&#xff08;文件头部&#xff09; Page Header&#xff08;页面头部&#xff09; Infimum Supremum&#xff08;最小记录和最大记录&#xff09; …...

KubeSphere 与 Pig 微服务平台的整合与优化:全流程容器化部署实践

一、前言 近年来,为了满足越来越复杂的业务需求,我们从传统单体架构系统升级为微服务架构,就是把一个大型应用程序分割成可以独立部署的小型服务,每个服务之间都是松耦合的,通过 RPC 或者是 Rest 协议来进行通信,可以按照业务领域来划分成独立的单元。但是微服务系统相对…...

虚幻基础2:gameplay框架

能帮到你的话&#xff0c;就给个赞吧 &#x1f618; 文章目录 ue框架&#xff1a;gameplay组成game modeactorcomponent player controllergame state 工作流程 ue框架&#xff1a;gameplay 组成 game mode 游戏类型和规则。可以控制游戏的开始与结束以及一些其他功能。 ac…...

在线base64转码工具

在线base64转码工具&#xff0c;无需登录&#xff0c;无需费用&#xff0c;用完就走。 官网地址&#xff1a; https://base64.openai2025.com 效果&#xff1a;...

2024年,我的技术探索与成长之路

2024年&#xff0c;我的技术探索与成长之路 2024年已经过去&#xff0c;作为一名技术爱好者和写作者&#xff0c;我回顾了过去一年在博客上记录的点滴&#xff0c;感慨良多。这一年&#xff0c;我不仅见证了技术的飞速发展&#xff0c;也在不断学习和实践中找到了自己的成长方向…...

【逆境中绽放:万字回顾2024我在挑战中突破自我】

&#x1f308;个人主页: Aileen_0v0 &#x1f525;热门专栏: 华为鸿蒙系统学习|计算机网络|数据结构与算法 ​&#x1f4ab;个人格言:“没有罗马,那就自己创造罗马~” 文章目录 一、引言二、个人成长与盘点情感与心理成长学习与技能提升其它荣誉 三、年度创作历程回顾创作内容概…...

图谱之前端关系应用

文章目录 图谱之前端关系应用&#xff08;relation-graph、d3.js、echarts&#xff09;1. relation-graph应用实例优缺点 2. d3.js应用实例优缺点 3. echarts应用实例优缺点 总结 图谱之前端关系应用&#xff08;relation-graph、d3.js、echarts&#xff09; 1. relation-grap…...

Kibana:ES|QL 编辑器简介

作者&#xff1a;来自 Elastic drewdaemon ES|QL 很重要 &#x1f4aa; 正如你可能已经听说的那样&#xff0c;ES|QL 是 Elastic 的新查询语言。我们对 ES|QL 寄予厚望。它已经很出色了&#xff0c;但随着时间的推移&#xff0c;它将成为与 Elasticsearch 中的数据交互的最强大…...

建造者模式(或者称为生成器(构建器)模式)

一、什么是建造者模式&#xff1f; 将复杂对象的构建与表示进行分离&#xff0c;使得统一的构建过程&#xff0c;可以创建出不同的对象表现模式 就是将复杂对象里面的成员变量&#xff0c;设置不同的值&#xff0c;使得生成出来的对象拥有不同的属性值&#xff1b; 二、特点…...

【CTFHub】SQL注入cookie注入及知识点

打开题目页面如下 根据提示应该在cookie处注入&#xff0c;通过burp suite抓包并发到重放器 知识点 Cookie 是存储在用户本地计算机上的小文件&#xff0c;由 Web 服务器通过 HTTP 协议发送给浏览器&#xff0c;并保存在用户的浏览器端。当用户再次访问该网站时&#xff0c;浏…...

CSS中样式继承+优先级

继承属性和非继承属性 一、定义及分类 1、继承属性是指在父元素上设置了这些属性后&#xff0c;子元素会自动继承这些属性的值&#xff0c;除非子元素显式地设置了不同的值。 常见的继承属性: 字体 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通信&#xff0c;需要频繁发送读写请求&#xff0c;发现软件占用内存一直在增减&#xff0c;经过不断咨询和尝试&#xff0c;终于解决了。 1.方案一&#xff08;失败&#xff09; 最开始以为是访问太频繁&#xff0c;导致创建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 用例图 管理员角色的用例&#xff1a; 文件分享大厅&#xff1a;管理员可以访问文件分享大厅&#xff0c;下载文件。个人信息管理&#xff1a;管理员可以更新自己的个人信息&#xff0c;修改密码。用户管理&#xff1a;管理员负责创建、更新或删除用户账户&…...

数据结构(链表 哈希表)

在Python中&#xff0c;链表和哈希表都是常见的数据结构&#xff0c;可以用来存储和处理数据。 链表是一种线性数据结构&#xff0c;由一系列节点组成&#xff0c;每个节点包含一个数据元素和一个指向下一个节点的指针。链表可以用来实现栈、队列以及其他数据结构。Python中可…...

1161 Merging Linked Lists (25)

Given two singly linked lists L1​a1​→a2​→⋯→an−1​→an​ and L2​b1​→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…...