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

潍坊做网站的企业销售推广

wzjs 2025/8/11 11:46:04

潍坊做网站的企业,销售推广,seo网站分析,自建网站系统个人博客：haichenyi.com。感谢关注一. 目录一–目录二–分片上传三–生成文件唯一标识（文件哈希）四–断点续传 & 秒传五–分片上传（并发控制）六–服务端合并分片七–优化八–总结大文件上传的核心…

个人博客：haichenyi.com。感谢关注

一. 目录

一–目录
二–分片上传
三–生成文件唯一标识（文件哈希）
四–断点续传 & 秒传
五–分片上传（并发控制）
六–服务端合并分片
七–优化
八–总结

大文件上传的核心痛点是：文件过大，用户网络环境不稳定，服务器压力过大，容易中断，用户体验极差。只要解决这几个问题就行了。其实，最重要的一个问题就是文件过大。文件太大了，我们就分成几份上传就行了。这就是分片。

大文件上传的核心流程
1. 前端分片 → 2. 计算文件唯一标识 → 3. 上传分片 → 4. 服务端合并分片 → 5. 完整性校验

二. 分片上传

将大文件分割成多个固定的小文件，减少单次请求的压力。举个栗子：100M的文件，分成10份，每个10M，这样就可以解决问题。核心代码如下

//主要就是File.slice
function createFileChunks(file, chunkSize = 10 * 1024 * 1024) {//分片数组const chunks = []//文件总大小const fileSize = file.sizelet start = 0while (start < fileSize) {//单个分片let chunk = {//文件数据chunk: file.slice(start, start + fileSize),//索引，用于文件合并时的顺序index: chunks.length}chunks.push(chunk)start += chunkSize}return chunks
}

三. 生成文件唯一标识（文件哈希）

使用文件内容生成唯一标识，用于标识文件，实现秒传和断点续传。代码如下

function calculateFileHash(file) {return new Promise((resolve, reject) => {const reader = new FileReader();const spark = new SparkMD5.ArrayBuffer();reader.readAsArrayBuffer(file);reader.onload = (e) => {spark.append(e.target.result);const hash = spark.end();resolve(hash);};})
}

四. 断点续传 & 秒传

秒传： 在上传之前，检查服务端是否存在已经有相同哈希值的文件，有则跳过，没有，则上传
断点续传： 上传前，检查已经上传的分片列表，跳过已上传的分片

五. 分片上传（并发控制）

使用Promise池控制并发数（如同时上传3个分片），避免浏览器阻塞。

async function uploadChunks(chunks, fileHash, concurrency = 3) {const pool = new Set(); // 并发池for (const { chunk, index } of chunks) {const formData = new FormData();formData.append('chunk', chunk);formData.append('hash', fileHash);formData.append('index', index);const task = fetch('/api/upload-chunk', {method: 'POST',body: formData,}).then(() => {pool.delete(task);});pool.add(task);if (pool.size >= concurrency) {await Promise.race(pool); // 等待任意任务完成}}await Promise.all(pool); // 等待剩余任务完成
}