【JS】前端分片上传大文件(支持1G以上的超大文件)

目录

  • 什么时候需要分片上传?
  • 分片上传流程
  • 获取文件专属MD5码

什么时候需要分片上传?

如果将大文件一次性上传,耗时会非常长,甚至可能传输失败,那么我们怎么解决这个问题呢?既然大文件上传不适合一次性上传,那么我们可以尝试将文件分片散上传。
这样的技术就叫做分片上传。分片上传就是将大文件分成一个个小文件(切片),将切片进行上传,等到后端接收到所有切片,再将切片合并成大文件。通过将大文件拆分成多个小文件进行上传,确实就是解决了大文件上传的问题。因为请求时可以并发执行的,这样的话每个请求时间就会缩短,如果某个请求发送失败,也不需要全部重新发送。

分片上传流程

Created with Raphaël 2.3.0 开始 获取文件专属MD5码 接口1:传MD5码获取该文件已上传的片数 将文件分片成promise请求数组 promise请求数组做线程池限制处理 promise.all并发发送异步请求 结束

获取文件专属MD5码

hash = (chunks) => {return new Promise((resolve) => {const spark = new sparkMD5();// 递归函数function _read(i){if(i >= chunks.length)resolve(spark.end());return;// 读取完成
const blob = chunks[i];const reader = new FileReader();reader.onload=e=>{// 读取到的字节数组const bytes =e.target.result;spark.append(bytes);read(i + 1);
reader.readAsArrayBuffer(blob);
read(e);
}

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

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

相关文章

jenkins+maven+gitlab自动化构建打包、部署

Jenkins自动化部署实现原理 环境准备 1、jenkins已经安装好 docker安装jenkins 2、gitlab已经安装好 docker安装gitlab 一、Jenkins系统配置 1.Global Tool Configuration 任务构建所用到的编译环境等配置,配置参考: jdk配置(jenkins自带…

GCNv2_SLAM-CPU详细安装教程(ubuntu18.04)

GCNv2_SLAM-CPU详细安装教程-ubuntu18.04 前言一、安装第三方库1.安装Pangolin2.安装OpenCV3.安装Eigen4.安装Pytorch(c) 二、安装以及运行GCNv2_SLAM1.安装编译GCNv2_SLAM2.单目模式运行演示案例 总结 前言 paper:https://arxiv.org/pdf/1902.11046.pdf githup::https://gith…

C#进阶-ASP.NET常用控件总结

一、ASP.NET基础控件 1、asp:TextBox (输入框) ASP.NET TextBox 控件用于接收用户输入。 <asp:TextBox ID"txtInput" runat"server"></asp:TextBox>2、asp:DropDownList (下拉框) ASP.NET DropDownList 控件用于提供一个下拉列表供用户选择…

clickhouse sql语句

查看a表的创建语句 SHOW CREATE TABLE a; 删除表b DROP TABLE b;例如&#xff1a; CREATE TABLE ark_us.d_stk_info_us_polygon_cik_5_w (ticker String,t_date DateTime64(6),name Nullable(String),market Nullable(String),type Nullable(String),cik Nullable(String),…

linux 安装gradle7.4.2环境

1.下载gradle7.4.2工程 百度网盘 请输入提取码百度网盘为您提供文件的网络备份、同步和分享服务。空间大、速度快、安全稳固&#xff0c;支持教育网加速&#xff0c;支持手机端。注册使用百度网盘即可享受免费存储空间https://pan.baidu.com/s/1hoNEFkBJPHAgs9ITAEh3Zg?pwdGJ…

linux下test,/usr/bin/test,[],和/usr/bin/[的作用及用法举例

1.test,/usr/bin/test,[],和/usr/bin/[介绍 首先&#xff0c;linux下test,/usr/bin/test,[],和/usr/bin/[命令都是等价命令 其次&#xff0c;linux下test,/usr/bin/test,[],和/usr/bin/[命令一般用来测试文件类型&#xff0c;或者用来比较字符串 test,/usr/bin/test,[],和/u…

DDos攻击如何被高防服务器有效防范?

德迅云安全-领先云安全服务与解决方案提供商 什么是DDos攻击&#xff1f; DDos攻击是一种网络攻击手段&#xff0c;旨在通过使目标系统的服务不可用或中断&#xff0c;导致无法正常使用网络服务。DDos攻击可以采取多种方式实施&#xff0c;包括洪水攻击、压力测试、UDP Flood…

WPF —— TabControl、StackPanel 控件详解

1 TabControl简介 表示包含多个项的控件&#xff0c;这些项共享屏幕上的同一空间。 TabControl有助于最大程度地减少屏幕空间使用量&#xff0c;同时允许应用程序公开大量数据。 TabControl包含共享同一屏幕空间的多个 TabItem 对象。一次只能看到 TabControl 中的一个 Ta…

java的23种设计模式02-创建型模式02-抽象工厂方法

一、抽象工厂方法 1-1、抽象工厂方法的定义 抽象工厂模式是一个比较复杂的创建型模式。 抽象工厂模式和工厂方法不太一样&#xff0c;它要解决的问题比较复杂&#xff0c;不但工厂是抽象的&#xff0c;产品是抽象的&#xff0c;而且&#xff1a;有多个产品需要创建&#xff…

玩转 Spring 状态机:更优雅的实现订单状态流转

说起 Spring 状态机&#xff0c;大家很容易联想到这个状态机和设计模式中状态模式的区别是啥呢&#xff1f;没错&#xff0c;Spring 状态机就是状态模式的一种实现&#xff0c;在介绍 Spring 状态机之前&#xff0c;让我们来看看设计模式中的状态模式。 1. 状态模式 状态模式…

pytorch之诗词生成3--utils

先上代码&#xff1a; import numpy as np import settingsdef generate_random_poetry(tokenizer, model, s):"""随机生成一首诗:param tokenizer: 分词器:param model: 用于生成古诗的模型:param s: 用于生成古诗的起始字符串&#xff0c;默认为空串:return: …

linux 安装/升级 svn

文章目录 下载最新版本安装包安装 下载最新版本安装包 wget https://dlcdn.apache.org/subversion/subversion-1.14.3.tar.gz tar -zxf subversion-1.14.3.tar.gz cd subversion-1.14.3 安装 ./configure 报错&#xff0c;提示缺少 apr-util 库&#xff0c;有的环境可能 apr 库…

人工智能|机器学习——CURE聚类算法(层次聚类)

1.CURE聚类概述 绝大多数聚类算法或者擅长处理球形和相似大小的聚类&#xff0e;或者在存在孤立点时变得比较脆弱。CURE采用了一种新颖的层次聚类算法&#xff0e;该算法选择基于质心和基于代表对象方法之间的中间策略。它不同于单个质心或对象来代表一个类&#xff0c;而是选择…

大话设计模式——6.工厂方法模式(Factory Method Pattern)

1.介绍 工厂方法模式也称工厂模式&#xff0c;是简单工厂模式的进一步抽象。定义一个用于创建对象的接口&#xff0c;使一个类的实例化延迟到其子类&#xff0c;让子类决定实例化哪个类。通过工厂父类定义负责创建产品的公共接口&#xff0c;通过子类确定所需要创建的类型。 属…

《ElementPlus 与 ElementUI 差异集合》el-input 多包裹一层 el-input__wrapper

差异 element-ui el-input 中&#xff0c;<div class"el-input"> 下一级就是 <input> 标签 &#xff1b;element-plus el-input中&#xff0c;<div class"el-input"> 和 <input> 标签之间多了一层 <div class"el-input__…

LeetCode 面试经典150题 88.合并两个有序数组

题目&#xff1a; 给你两个按 非递减顺序 排列的整数数组 nums1 和 nums2&#xff0c;另有两个整数 m 和 n &#xff0c;分别表示 nums1 和 nums2 中的元素数目。 请你 合并 nums2 到 nums1 中&#xff0c;使合并后的数组同样按 非递减顺序 排列。 注意&#xff1a;最终&…

Nginx、LVS、HAProxy工作原理和负载均衡架构

当前大多数的互联网系统都使用了服务器集群技术&#xff0c;集群是将相同服务部署在多台服务器上构成一个集群整体对外提供服务&#xff0c;这些集群可以是 Web 应用服务器集群&#xff0c;也可以是数据库服务器集群&#xff0c;还可以是分布式缓存服务器集群等等。 在实际应用…

提升零售行业竞争力的信息抽取技术应用与实践

一、引言 在当今快速发展的零售行业中&#xff0c;沃尔玛、家乐福等大型连锁超市为消费者提供了丰富的日常食品和日用品。为了进一步提升客户体验和优化库存管理&#xff0c;这些零售巨头纷纷开始探索和应用先进的信息抽取技术。 本文将深入探讨一个成功的信息抽取项目&#…

使用HttpRequest工具类调用第三方URL传入普通以及文件参数并转换MultipartFile成File

使用HttpRequest工具类调用第三方URL传入普通以及文件参数 一、依赖及配置二、代码1、模拟第三方服务2、调用服务3、效果实现 一、依赖及配置 <!--工具依赖--><dependency><groupId>cn.hutool</groupId><artifactId>hutool-all</artifactId&g…

【 React 】React 组件之间如何通信?

相关文章&#xff1a; React Context的使用方法 react Provider Consumer 使用方法 1. 是什么 我们将组件间通信可以拆分为两个词&#xff1a; 组件通信 组件是vue中最强大的功能之一&#xff0c;同样组件化是React的核心思想 相比vue&#xff0c;React的组件更加灵活和多样…