当前位置：首页 > article >正文

视频的分片上传

article 2026/4/8 21:42:20

分片上传需求分析：

项目中很多地方需要上传视频，如果视频很大，上传到服务器需要很多时间，这个时候体验就会很差。所以需要前端实现分片上传的功能。

要实现分片上传，需要对视频进行分割，分割成不同的大小进行上传，但是在上传的时候后台需要知道文件的唯一标识，进行识别，避免是重复数据上传，这个时候我们可以使用hash对内容进行生成唯一标识。

第一种方法实现：

html文件:

<input type="file" id="videoFile" accept="video/*" />

javascript 文件：

document.getElementById('uploadBtn').addEventListener('click', async () => {const fileInput = document.getElementById('videoFile');const file = fileInput.files[0];if (!file) {alert('请选择一个文件');return;}const chunkSize = 5 * 1024 * 1024; // 每个分片的大小，例如 5MB//分析存在几个分片，假如文件是10M ，那就是两个分片。const totalChunks = Math.ceil(file.size / chunkSize);//唯一id，这个是必须的，用来区分不同的分片const fileId = Date.now().toString(); // 生成一个唯一的文件ID//遍历分片，去分别上传到服务器for (let chunkNumber = 0; chunkNumber < totalChunks; chunkNumber++) {const start = chunkNumber * chunkSize;const end = Math.min(start + chunkSize, file.size);const chunk = file.slice(start, end);//处理数据给后端需要的格式const formData = new FormData();formData.append('file', chunk);formData.append('fileId', fileId);formData.append('chunkNumber', chunkNumber);formData.append('totalChunks', totalChunks);formData.append('fileName', file.name);try {const response = await fetch('/upload', {method: 'POST',body: formData,});if (!response.ok) {throw new Error('上传失败');}console.log(`分片 ${chunkNumber + 1}/${totalChunks} 上传成功`);} catch (error) {console.error('上传出错:', error);break;}}console.log('所有分片上传完成');
});

分析一下上面的formData:
在这里插入图片描述
更多的数据格式参考文章：点击跳转

服务端处理：

服务器端需要处理每个分片的上传请求，并在所有分片上传完成后将其合并。

接受分片：

服务器端可以使用类似以下的代码来接收分片：

app.post('/upload', (req, res) => {const { fileId, chunkNumber, totalChunks, fileName } = req.body;const chunk = req.files.file;// 保存分片到临时目录const chunkPath = `./temp/${fileId}-${chunkNumber}`;fs.writeFileSync(chunkPath, chunk.data);res.send({ success: true });
});

合并分片：

当所有分片上传完成后，服务器端可以将它们合并成一个完整的文件：

app.post('/merge', (req, res) => {const { fileId, totalChunks, fileName } = req.body;const outputPath = `./uploads/${fileName}`;const writeStream = fs.createWriteStream(outputPath);for (let i = 0; i < totalChunks; i++) {const chunkPath = `./temp/${fileId}-${i}`;const chunk = fs.readFileSync(chunkPath);writeStream.write(chunk);fs.unlinkSync(chunkPath); // 删除临时分片}writeStream.end();res.send({ success: true });
});

前端通知服务器合并分片

在所有分片上传完成后，前端可以发送一个请求通知服务器合并分片：

fetch('/merge', {method: 'POST',headers: {'Content-Type': 'application/json',},body: JSON.stringify({fileId: fileId,totalChunks: totalChunks,fileName: file.name,}),
});

第二种具体实现：

这个地方使用hash （spark-md5 第三方依赖）生成唯一标识，这个方式只对前端分片进行了封装，可以结合上面的代码传递给后端。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>视频分片上传</title></head><body><input type="file" id="file"/><script src="../node_modules/spark-md5/spark-md5.js"></script><script>const inp = document.querySelector('#file');inp.onchange = async () => {const file = inp.files[0];if(!file){alert("文件不存在！");}const chunks = createChunks(file,10*1024*1024);console.log(chunks);const result = await hash(chunks);console.log(result);}//生成hashfunction hash(chunks){return new Promise((resolve, reject) => {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 = function(e){const bytes = e.target.result;//读取到的字节数组spark.append(bytes);_read(i+1)}reader.readAsText(blob);}_read(0);})}function createChunks(file,chunkSize){const result = [];for (let i = 0; i < file.size; i+=chunkSize) {result.push(file.slice(i,i+chunkSize));}return result;}
</script></body>
</html>

视频的分片上传

分片上传需求分析： 项目中很多地方需要上传视频，如果视频很大，上传到服务器需要很多时间 ，这个时候体验就会很差。所以需要前端实现分片上传的功能。要实现分片上传，需要对视频进行分割，分割成不同的大小…...

编程日记 2026/4/7 1:29:41

Moonshot AI 新突破：MoBA 为大语言模型长文本处理提效论文速读

前言在自然语言处理领域，随着大语言模型（LLMs）不断拓展其阅读、理解和生成文本的能力，如何高效处理长文本成为一项关键挑战。近日，Moonshot AI Research 联合清华大学、浙江大学的研究人员提出了一种创新方法 —— 混…...

编程日记 2026/4/6 2:27:20

Deepseek首页实现 HTML

人工智能与未来：机遇与挑战引言在过去的几十年里，人工智能（AI）技术取得了突飞猛进的发展。从语音助手到自动驾驶汽车，AI 正在深刻地改变我们的生活方式、工作方式以及社会结构。然而，随着 AI 技术的普及…...

编程日记 2026/4/7 11:35:53

AI革命下的多元生态：DeepSeek、ChatGPT、XAI、文心一言与通义千问的行业渗透与场景重构

前言人工智能技术的爆发式发展催生了多样化的AI模型生态，从通用对话到垂直领域应用，从数据挖掘到创意生成，各模型凭借其独特的技术优势与场景适配性，正在重塑全球产业格局。本文将以DeepSeek、ChatGPT、XAI（可解释人…...

编程日记 2025/6/26 23:29:30

VS2022配置FFMPEG库基础教程

1 简介 1.1 起源与发展历程 FFmpeg诞生于2000年，由法国工程师Fabrice Bellard主导开发，其名称源自"Fast Forward MPEG"，初期定位为多媒体编解码工具。2004年后由Michael Niedermayer接任维护，逐步发展成为包含音视频采…...

编程日记 2026/4/8 15:30:29

kafka基本知识

什么是 Kafka？ Apache Kafka 是一个开源的分布式流处理平台，最初由 LinkedIn 开发，后来成为 Apache 软件基金会的一部分。Kafka 主要用于构建实时数据管道和流处理应用程序。它能够高效地处理大量的数据流，广泛应用于日志收集、数…...

编程日记 2026/4/6 2:45:22

类型系统下的语言分类与类型系统基础

类型系统是一种根据计算值的种类对程序语法进行分类的方式，目的是自动检查是否有可能导致错误的行为。 —Benjamin.C.Pierce，《类型与编程语言》（2002） 每当谈到编程语言时，人们常常会提到“静态类型”和“动态类型”。…...

编程日记 2026/4/5 23:01:43

力扣-回溯-93 复原IP地址

思路用一个vector存放可能的结果，然后用一个变量判断插入点的数量，假设再最后一段后也插入点代码 class Solution { public:vector<string> result;vector<string> path;int toNum(string s){int d 1;int result 0;for(int i s.size…...

编程日记 2025/6/29 11:35:18

SpringSecurity设置白名单

Spring Security 访问权限系列文章： 《SpringSecurity基于配置方法控制访问权限：MVC匹配器、Ant匹配器》《SpringSecurity基于注解实现方法级别授权：PreAuthorize、PostAuthorize、Secured》《SpringSecurity设置白名单》白名单&#xff0…...

编程日记 2026/2/19 23:23:04

有没有使用wxpython开发的类似于visio或drawio的开源项目（AI生成）

有没有使用wxpython开发的类似于visio或drawio的开源项目是的，有一些使用wxPython开发的类似于Microsoft Visio或draw.io（现为diagrams.net）的开源项目。wxPython 是一个跨平台的GUI工具包，它允许Python开发者创建桌面应用程序&…...

编程日记 2026/4/6 21:39:24

HTML之JavaScript DOM操作元素（2）

HTML之JavaScript DOM操作元素（2） 4.增删元素var element document.createElement("元素名") 创建新元素父元素.appendChild(子元素) 在父元素中追加子元素父元素.insertBefore(新元素,参照元素) 在特定元素之前新增元…...

编程日记 2026/2/21 22:49:46

前端八股——JS+ES6

前端八股：JSES6 说明：个人总结，用于个人复习回顾，将持续改正创作，已在语雀公开，欢迎评论改正。...

编程日记 2026/2/25 20:02:11

day58 第十一章：图论part08

拓扑排序精讲关键： 先找到入度为0的节点，把这些节点加入队列/结果，然后依次循环再找。 #include <iostream> #include <vector> #include <queue> #include <unordered_map> using namespace std; int main() {int …...

编程日记 2026/2/24 20:59:33

【MySQL 一数据库基础】深入解析 MySQL 的索引(3)

索引索引操作自动创建当我们为一张表加主键约束(Primary key)，外键约束(Foreign Key)，唯一约束(Unique)时，MySQL会为对应的的列自动创建一个索引；如果表不指定任何约束时，MySQL会自动为每一列生成一个索引并用ROW_I…...

编程日记 2026/4/6 10:19:13

【C++】优先级队列宝藏岛

> 🍃 本系列为初阶C的内容，如果感兴趣，欢迎订阅🚩 > 🎊个人主页:[小编的个人主页])小编的个人主页 > 🎀 🎉欢迎大家点赞👍收藏⭐文章 > ✌️ 🤞 &#x1…...

编程日记 2026/4/6 20:57:36

解决elementUi el-select 响应式不生效的问题

情况一,字段类型不匹配考虑option的value值的字段类型是否和api返回的字段类型一致，如果一个为字符串一个为数字类型是无法匹配上的 <template> <div><el-select v-model"value" size"large"style"width: 240px"&…...

编程日记 2026/3/6 19:55:33

List 接口中的 sort 和 forEach 方法

List 接口中的 sort 和 forEach 方法是 Java 8 引入的两个非常实用的函数，分别用于排序和遍历列表中的元素。以下是它们的详细介绍和用法： sort 函数功能对列表中的元素进行排序。默认使用自然顺序（如数字从小到大，字符…...

编程日记 2026/4/6 2:18:00

MusicGPT的本地化部署与远程调用：让你的Windows电脑成为AI音乐工作站

文章目录前言1. 本地部署2. 使用方法介绍3. 内网穿透工具下载安装4. 配置公网地址5. 配置固定公网地址前言在如今快节奏的生活里，音乐不仅能够抚慰我们的心灵，还能激发无限创意。想象一下，在忙碌的工作间隙或闲暇时光中，只需输…...

编程日记 2026/4/6 2:29:56

小波变换使用matlab和python 注意1d和2d的函数区别。注意默认参数问题。最终三个版本结果能够对齐。 matlab load(wave_in.mat)% res: image of 1536 x 1536 th1; dlevel7; wavenamedb6;[m,n] wavedec2(res, dlevel, wavename);vec zeros(size(m)); vec(1:n(1)*n(1)*1) m…...

编程日记 2026/3/3 14:04:25

Unity通过Vosk实现离线语音识别方法

标注：deepseek直接生成，待验证在Unity中实现离线语音识别可以通过集成第三方语音识别库来实现。以下是一个使用 Unity 和 Vosk（一个开源的离线语音识别库）的简单示例。准备工作 Vosk：一个开源的离线语音识别库&am…...

编程日记 2026/4/6 2:05:14

【登月计划】 DAY2 中期：产品研发与设计验证（4-6）--《设计图纸如何从电脑飞进生产线？揭秘研发系统的 “暗箱操作”》

目录四、乐高教学：拆解 CAD/CAE 与 PLM 的 “共生关系” 1. CAD 系统：工程师的 “数字画笔” 🎨 2. CAE 系统：产品的 “虚拟实验室” 🔬 3. PLM 系统：设计的 “大管家” 五、装逼话术：设计…...

编程日记 2025/11/17 17:08:32

智能优化算法：莲花算法（Lotus flower algorithm，LFA）介绍，提供MATLAB代码

一、莲花算法 1.1 算法原理莲花算法（Lotus flower algorithm，LFA）是一种受自然启发的优化算法，其灵感来源于莲花的自清洁特性和授粉过程。莲花的自清洁特性，即所谓的“莲花效应”，是由其叶片表面的微纳…...

编程日记 2026/4/7 3:07:14

Qt开源项目获取

GitHub上超实用的Qt开源项目，码住不谢！🎉 宝子们，今天来给大家安利一波GitHub上超棒的Qt开源项目，无论是学习还是开发，都能找到超多灵感和实用工具，快来看看有没有你需要的吧！1. Qt-Advanced-Docking-System完美的Dock窗口布局解决方案，让你的窗口管理变得超级灵活。…...

编程日记 2026/2/26 11:10:10