1. 项目概述
作为一名在前端领域摸爬滚打多年的老手，我最近接手了一个颇具挑战性的任务：在内网环境中实现大文件续传功能。这个需求看似简单，但在实际落地时却遇到了不少坑。今天我就把整个实现过程和踩过的雷完整分享出来，希望能帮到有类似需求的同行。
内网环境下的大文件传输有其特殊性：网络环境相对稳定但带宽有限，数据安全性要求高，且经常需要支持断点续传。传统的文件上传方式在这里完全不够用，我们需要一套更健壮的解决方案。而jQuery作为前端开发的老牌利器，配合现代浏览器API，完全可以胜任这个任务。
2. 核心需求解析
2.1 内网环境特点
内网文件传输与公网环境有显著差异：
- 网络延迟低但带宽可能受限
- 传输稳定性高但服务器负载可能较重
- 不需要考虑CDN等公网优化手段
- 安全性要求更高，通常需要自定义加密
2.2 大文件传输的痛点
处理大文件（如超过1GB）时，传统上传方式会面临：
- 内存占用过高导致浏览器崩溃
- 网络中断后需要重新上传整个文件
- 上传进度难以准确监控
- 服务器处理压力大
2.3 续传功能的必要性
在内网办公场景中，续传功能至关重要：
- 员工可能需要在不同设备间切换工作
- 网络闪断后能快速恢复上传
- 避免重复传输已成功上传的部分
- 节省服务器资源和带宽
3. 技术方案设计
3.1 整体架构
我们采用分片上传+断点续传的方案：
- 前端将大文件切割为固定大小的分片
- 每个分片单独上传并记录状态
- 上传中断后，查询已上传分片情况
- 仅上传缺失的分片
- 服务器端合并所有分片
3.2 关键技术选型
- 核心库：jQuery（简化DOM操作和AJAX调用）
- 文件处理：HTML5 File API
- 分片算法：固定大小分片（如5MB）
- 状态管理：localStorage + 服务端记录
- 进度监控：XMLHttpRequest的progress事件
3.3 分片策略设计
经过多次测试，我们确定了最佳分片规则：
- 基础分片大小：5MB
- 动态调整：根据网络状况在3-10MB间浮动
- 最后分片：允许小于标准大小
- 分片命名规则：文件MD5_分片序号.分片后缀
注意：分片大小需要平衡网络效率和内存占用，过大会增加失败重传成本，过小会导致请求过多。
4. 前端实现细节
4.1 文件分片处理
javascript复制function sliceFile(file, chunkSize) {
const chunks = [];
let start = 0;
let end = 0;
let index = 0;
while (start < file.size) {
end = Math.min(start + chunkSize, file.size);
const chunk = file.slice(start, end);
chunks.push({
index: index++,
chunk: chunk,
start: start,
end: end
});
start = end;
}
return chunks;
}
4.2 上传状态管理
我们使用localStorage保存上传状态：
javascript复制function saveUploadState(fileId, state) {
const uploads = JSON.parse(localStorage.getItem('fileUploads') || '{}');
uploads[fileId] = state;
localStorage.setItem('fileUploads', JSON.stringify(uploads));
}
function getUploadState(fileId) {
const uploads = JSON.parse(localStorage.getItem('fileUploads') || '{}');
return uploads[fileId] || null;
}
4.3 上传控制逻辑
核心上传函数实现：
javascript复制function uploadChunk(fileId, chunk, chunksTotal) {
const formData = new FormData();
formData.append('file', chunk.chunk);
formData.append('chunkIndex', chunk.index);
formData.append('chunksTotal', chunksTotal);
formData.append('fileId', fileId);
return $.ajax({
url: '/upload',
type: 'POST',
data: formData,
processData: false,
contentType: false,
xhr: function() {
const xhr = new XMLHttpRequest();
xhr.upload.addEventListener('progress', function(e) {
if (e.lengthComputable) {
const percent = (e.loaded / e.total) * 100;
updateProgress(fileId, chunk.index, percent);
}
}, false);
return xhr;
}
});
}
5. 服务端配合要点
5.1 接口设计规范
服务端需要提供三个核心接口：
/init- 初始化上传，返回文件ID和已上传分片/upload- 处理分片上传/merge- 合并所有分片为完整文件
5.2 分片存储策略
建议的目录结构：
code复制/uploads/
/temp/
/{fileId}/
0.chunk
1.chunk
...
/completed/
{fileId}.ext
5.3 合并文件实现
Python示例代码：
python复制def merge_chunks(file_id, original_name):
temp_dir = os.path.join(UPLOAD_TEMP_DIR, file_id)
chunks = sorted(os.listdir(temp_dir), key=lambda x: int(x.split('.')[0]))
with open(os.path.join(UPLOAD_COMPLETE_DIR, original_name), 'wb') as f:
for chunk in chunks:
with open(os.path.join(temp_dir, chunk), 'rb') as c:
f.write(c.read())
shutil.rmtree(temp_dir)
6. 性能优化技巧
6.1 并行上传控制
通过队列控制并行上传数量：
javascript复制class UploadQueue {
constructor(maxParallel = 3) {
this.maxParallel = maxParallel;
this.queue = [];
this.activeCount = 0;
}
add(task) {
this.queue.push(task);
this.run();
}
run() {
while (this.activeCount < this.maxParallel && this.queue.length) {
const task = this.queue.shift();
this.activeCount++;
task().finally(() => {
this.activeCount--;
this.run();
});
}
}
}
6.2 内存管理
及时释放不再需要的文件引用：
javascript复制function cleanupAfterUpload(fileId) {
const uploads = JSON.parse(localStorage.getItem('fileUploads') || '{}');
delete uploads[fileId];
localStorage.setItem('fileUploads', JSON.stringify(uploads));
// 释放内存
fileHandles[fileId] = null;
delete fileHandles[fileId];
}
6.3 网络自适应
根据网络状况动态调整分片大小：
javascript复制function getDynamicChunkSize() {
const connection = navigator.connection || navigator.mozConnection || navigator.webkitConnection;
if (connection) {
switch (connection.effectiveType) {
case 'slow-2g':
return 1 * 1024 * 1024; // 1MB
case '2g':
return 2 * 1024 * 1024; // 2MB
case '3g':
return 5 * 1024 * 1024; // 5MB
default:
return 10 * 1024 * 1024; // 10MB
}
}
return 5 * 1024 * 1024; // 默认5MB
}
7. 安全增强措施
7.1 文件校验机制
上传完成后进行完整性校验：
javascript复制function verifyFile(file, serverHash) {
return new Promise((resolve) => {
const reader = new FileReader();
const hasher = new SparkMD5.ArrayBuffer();
reader.onload = (e) => {
hasher.append(e.target.result);
const localHash = hasher.end();
resolve(localHash === serverHash);
};
reader.readAsArrayBuffer(file);
});
}
7.2 传输加密
对敏感分片内容进行加密：
javascript复制async function encryptChunk(chunk, key) {
const iv = crypto.getRandomValues(new Uint8Array(12));
const algorithm = { name: 'AES-GCM', iv };
const cryptoKey = await crypto.subtle.importKey(
'raw',
key,
{ name: 'AES-GCM' },
false,
['encrypt']
);
const encrypted = await crypto.subtle.encrypt(
algorithm,
cryptoKey,
await chunk.arrayBuffer()
);
return { iv, encrypted };
}
8. 常见问题与解决方案
8.1 分片上传失败处理
实现自动重试机制：
javascript复制async function uploadWithRetry(fileId, chunk, maxRetry = 3) {
let attempt = 0;
while (attempt < maxRetry) {
try {
await uploadChunk(fileId, chunk);
return true;
} catch (error) {
attempt++;
if (attempt >= maxRetry) throw error;
await new Promise(resolve => setTimeout(resolve, 1000 * attempt));
}
}
}
8.2 浏览器兼容性问题
针对老旧浏览器的降级方案：
javascript复制function getFileSliceMethod() {
if ('slice' in File.prototype) {
return 'slice';
} else if ('mozSlice' in File.prototype) {
return 'mozSlice';
} else if ('webkitSlice' in File.prototype) {
return 'webkitSlice';
}
return null;
}
function safeSlice(file, start, end) {
const method = getFileSliceMethod();
if (!method) throw new Error('File slicing not supported');
return file[method](start, end);
}
8.3 大文件内存溢出
使用FileReader的渐进式读取：
javascript复制function readFileInChunks(file, chunkSize, callback) {
const fileSize = file.size;
let offset = 0;
const reader = new FileReader();
reader.onload = function() {
callback(reader.result, offset);
offset += reader.result.byteLength;
if (offset < fileSize) {
readNextChunk();
}
};
function readNextChunk() {
const end = Math.min(offset + chunkSize, fileSize);
const slice = file.slice(offset, end);
reader.readAsArrayBuffer(slice);
}
readNextChunk();
}
9. 完整实现示例
9.1 前端主控代码
javascript复制class FileUploader {
constructor(options) {
this.options = {
chunkSize: 5 * 1024 * 1024,
maxParallel: 3,
...options
};
this.queue = new UploadQueue(this.options.maxParallel);
this.fileStates = {};
}
async upload(file) {
const fileId = this.generateFileId(file);
const chunks = sliceFile(file, this.options.chunkSize);
// 初始化上传
const { uploadedChunks } = await this.initUpload(file, fileId);
// 过滤已上传分片
const chunksToUpload = chunks.filter(
chunk => !uploadedChunks.includes(chunk.index)
);
// 加入上传队列
chunksToUpload.forEach(chunk => {
this.queue.add(() => this.uploadChunk(fileId, chunk, chunks.length));
});
// 等待所有分片完成
await this.waitForCompletion(fileId, chunks.length);
// 通知服务端合并
await this.mergeFile(fileId, file.name);
// 清理资源
this.cleanup(fileId);
}
// ...其他方法实现
}
9.2 服务端Node.js示例
javascript复制const express = require('express');
const multer = require('multer');
const fs = require('fs');
const path = require('path');
const app = express();
const upload = multer({ dest: 'uploads/temp/' });
// 初始化上传
app.post('/init', (req, res) => {
const { fileId } = req.body;
const chunkDir = path.join('uploads/temp', fileId);
let uploadedChunks = [];
if (fs.existsSync(chunkDir)) {
uploadedChunks = fs.readdirSync(chunkDir)
.map(name => parseInt(name.split('.')[0]))
.filter(num => !isNaN(num));
} else {
fs.mkdirSync(chunkDir, { recursive: true });
}
res.json({ fileId, uploadedChunks });
});
// 处理分片上传
app.post('/upload', upload.single('file'), (req, res) => {
const { chunkIndex, fileId } = req.body;
const tempPath = req.file.path;
const targetPath = path.join('uploads/temp', fileId, `${chunkIndex}.chunk`);
fs.rename(tempPath, targetPath, err => {
if (err) return res.status(500).send(err);
res.sendStatus(200);
});
});
// 合并文件
app.post('/merge', (req, res) => {
const { fileId, fileName } = req.body;
const chunkDir = path.join('uploads/temp', fileId);
const chunks = fs.readdirSync(chunkDir)
.sort((a, b) => parseInt(a.split('.')[0]) - parseInt(b.split('.')[0]));
const writeStream = fs.createWriteStream(
path.join('uploads/completed', fileName)
);
chunks.forEach(chunk => {
const chunkPath = path.join(chunkDir, chunk);
writeStream.write(fs.readFileSync(chunkPath));
fs.unlinkSync(chunkPath);
});
writeStream.end();
fs.rmdirSync(chunkDir);
res.sendStatus(200);
});
10. 实测经验分享
在实际项目中，我们遇到了几个教科书上不会提到的问题：
-
分片边界问题：某些文件类型（如压缩包）在分片边界处会出现损坏。解决方案是在分片时保留额外的重叠数据（如前后各1KB），合并时再去除。
-
内存泄漏：长时间上传多个大文件会导致内存持续增长。必须确保及时释放File对象和Blob对象的引用。
-
暂停/恢复逻辑：实现真正的暂停需要中止正在进行的XHR请求，而不仅仅是停止队列。我们使用了AbortController来实现干净的请求中止。
-
浏览器标签页休眠：当用户切换标签页时，部分浏览器会限制JavaScript执行。我们通过Web Worker将上传逻辑移到后台线程解决。
-
文件名编码问题：不同操作系统上传的文件名编码可能不同。服务端统一使用UTF-8解码，前端对文件名进行URL编码传输。
这套方案在我们公司的内网办公系统中已经稳定运行2年多，单文件最大成功上传过87GB的设计稿压缩包，网络中断后也能准确恢复上传。核心代码经过多次优化，现在可以做到：
- 上传进度精确到分片级别
- 网络波动自动适应
- 内存占用稳定可控
- 支持任意大小的文件上传
对于需要在内网环境中实现大文件传输的团队，这套基于jQuery的方案既保留了传统技术的稳定性，又结合了现代浏览器API的强大功能，是性价比极高的选择。