IT评测·应用市场-qidao123.com技术社区

标题: 基于Node.js实现大文件断点续传的完整方案，与前端的Vue+Element UI示例完善共同 [打印本页]

作者: 三尺非寒 时间: 2025-4-3 13:04
标题: 基于Node.js实现大文件断点续传的完整方案，与前端的Vue+Element UI示例完善共同
在 Vue 前端开发中实现大文件断点续传，需结合分片上传、哈希校验和进度规复等技术。以下是具体实现方案：
一、技术原理

分片上传：将大文件切割为多个小块（如 1MB/片）。
唯一标识：盘算文件哈希（如 MD5）作为文件唯一标识。
断点记录：记录已上传的分片索引，停止后从断点继承上传。
合并哀求：所有分片上传完成后，通知后端合并文件。
并发控制：p-limit 是一个控制哀求并发数量的库。

1、p-limit

npm i
nstall p-limit

复制代码

p-limit是一个用于限制并发操纵的JavaScript库，主要用于控制同时执行的异步操纵数量，以制止系统资源过分占用和性能下降。它通过维护一个哀求队列来管理并发操纵，当并发限制数未满时，新操纵会立刻执行；当达到限制数时，新操纵会被加入等候队列，直到有空闲位置再执行。
使用方法
使用p-limit非常简单，起首需要创建一个限制对象并指定并发限制数。然后将需要执行的异步操纵包装成一个函数，并通过调用限制对象的函数来执行这些操纵。当并发限制数未满时，操纵会立刻执行；如果达到限制数，操纵会被加入等候队列，按照先辈先出的次序执行
。
2、spark-md5

npm i
nstall spark-md5

复制代码

Spark-md5是一个JavaScript库，用于快速盘算文件或数据的MD5值，支持浏览器环境，可用于文件完整性校验和分片盘算。其主要功能包括calculate、append、init和end等方法，适用于大文件分片处理。由于MD5是单向哈希，故无法解密。通过比较文件的MD5值，可以判断文件是否同等。
二、实现步骤

1、文件分片

// 使用 File.slice 方法分片
const chunkSize = 1 * 1024 * 1024; // 1MB
const chunks = [];
let start = 0;
while (start < file.size) {
const end = Math.min(start + chunkSize, file.size);
const chunk = file.slice(start, end);
chunks.push(chunk);
start = end;
}

复制代码

2、盘算文件哈希

/**
* 计算文件的哈希值
* @param file 文件对象
* @returns Promise<string> 返回计算得到的哈希值
*/
const calculateFileHash = async (file) => {
return new Promise((resolve) => {
const spark = new SparkMD5.ArrayBuffer();
const reader = new FileReader();
reader.readAsArrayBuffer(file);
reader.onload = (e) => {
spark.append(e.target.result);
resolve(spark.end());
};
});
};

复制代码

3、查询已上传分片

file.value = uploadFile.raw;
fileHash.value = await calculateFileHash(file.value);
const { data } = await axios.get('/api/check', {
params: { fileHash: fileHash.value }
});

复制代码

4、上传分片

// 上传未完成的分片
const requests = chunks.map((chunk, index) => {
if (uploadedChunkIndexes.value.includes(index)) return;
const formData = new FormData();
formData.append('chunk', chunk);
formData.append('hash', fileHash.value);
formData.append('index', index);
return axios.post('/api/upload', formData, {
onUploadProgress: (e) => {
const percent = Math.round((e.loaded / e.total) * 100);
updateProgress(index, percent);
}
}).then(() => {
uploadedChunkIndexes.value.push(index);
updateProgress();
});
}).filter(Boolean);
await Promise.all(requests);

复制代码

5、并发控制

// 引入 p-limit
import pLimit from 'p-limit';
// 设置最大并发数（例如 3）
const CONCURRENT_LIMIT = 3;
// 创建并发控制器
const limit = pLimit(CONCURRENT_LIMIT);
// 生成任务列表（过滤已上传的分片）
const tasks = chunks.map((chunk, index) => {
if (uploadedChunkIndexes.value.includes(index)) {
return Promise.resolve(); // 跳过已上传
}
// 将每个任务包裹在并发控制器中
return limit(() => {
const formData = new FormData();
formData.append('chunk', chunk);
formData.append('hash', fileHash.value);
formData.append('index', index);
return axios.post('/api/upload', formData, {
onUploadProgress: (e) => {
// 更新进度条（需结合 Vue 响应式状态）
}
}).then(() => {
// 更新已上传的分片索引列表
uploadedChunkIndexes.value.push(index);
});
});
});
// 等待所有任务完成
await Promise.all(tasks);

复制代码

6、通知合并文件

await axios.post('/api/merge', {
fileName: file.value.name,
fileHash: fileHash.value,
chunkCount: chunks.length
});

复制代码

5、错误重试

单个分片上传失败时自动重试（如 3 次）。

return limit(() => {
const MAX_RETRY = 3;
let retryCount = 0;
const attemptUpload = () => {
return axios.post('/api/upload').catch((error) => {
if (retryCount < MAX_RETRY) {
retryCount++;
return attemptUpload();
}
throw error;
});
};
return attemptUpload();
});

复制代码

前端所有代码
7、前端页面

<template>
<div class="upload-container">
<el-upload class="upload-demo" drag :auto-upload="false" :on-change="handleFileChange" :show-file-list="false">
<el-icon class="el-icon--upload"><upload-filled /></el-icon>
<div class="el-upload__text">将文件拖到此处或<em>点击选择</em></div>
</el-upload>
<div v-if="file" class="progress-box">
<div class="file-info">
{{ file.name }} ({{ formatSize(file.size) }})
</div>
<el-progress :percentage="totalProgress" :status="uploadStatus" :stroke-width="16" />
<div class="action-buttons">
<el-button type="primary" @click="startUpload" :disabled="isUploading || isMerging">
{{ isUploading ? '上传中...' : '开始上传' }}
</el-button>
<el-button @click="pauseUpload" :disabled="!isUploading">
暂停
</el-button>
</div>
</div>
</div>
</template>

复制代码

三、后端实现

以下是一个基于 Node.js (Express) 实现大文件断点续传后端的完整方案，与前端的 Vue + Element UI 示例完善共同：

分片上传的接口：接收前端传来的每个分片，存储到暂时目次。
检查分片接口：告诉前端哪些分片已经上传，制止重复上传。
合并分片接口：当所有分片上传完成后，合并成完整的文件。
文件校验：确保文件在传输过程中没有粉碎，好比使用哈希校验。
暂时文件管理：上传过程中保存分片，合并后清理暂时文件。

1、项目结构

├── server.js # 主入口文件
├── uploads # 上传文件存储目录
│ ├── temp # 分片临时存储目录
│ └── merged # 合并后的文件目录
└── package.json

复制代码

2、依赖安装

npm i
nstall express multer cors fs-extra

复制代码

3、服务端代码

// server.js

const express = require('express');
const multer = require('multer');
const fs = require('fs');
const path = require('path');
const cors = require('cors');
const fse = require('fs-extra');
const app = express();
app.use(cors());
app.use(express.json());
// 文件存储目录
const UPLOAD_DIR = path.resolve(__dirname, 'uploads');
const TEMP_DIR = path.join(UPLOAD_DIR, 'temp'); // 分片临时目录
const MERGED_DIR = path.join(UPLOAD_DIR, 'merged');// 合并文件目录
// 确保目录存在
fse.ensureDirSync(TEMP_DIR);
fse.ensureDirSync(MERGED_DIR);
// 分片上传中间件
const chunkUpload = multer({ dest: TEMP_DIR });
// ================== 接口实现 start ================== //
// 1. 检查分片状态
app.get('/api/check', (req, res) => {
const { fileHash } = req.query;
const chunkDir = path.resolve(TEMP_DIR, fileHash);
// 已上传的分片索引列表
let uploadedChunks = [];
if (fse.existsSync(chunkDir)) {
uploadedChunks = fse.readdirSync(chunkDir).map(name => parseInt(name));
}
res.json({
code: 0,
data: {
uploadedIndexes: uploadedChunks
}
});
});
// 2. 上传分片
app.post('/api/upload', chunkUpload.single('chunk'), async (req, res) => {
const { hash, index } = req.body;
const chunkPath = req.file.path;
const chunkDir = path.resolve(TEMP_DIR, hash);
try {
// 创建哈希目录
await fse.ensureDir(chunkDir);
// 移动分片到目标目录（使用索引命名）
const destPath = path.join(chunkDir, index);
await fse.move(chunkPath, destPath);
res.json({ code: 0, message: '分片上传成功' });
} catch (err) {
res.status(500).json({ code: 1, message: '分片上传失败' });
}
});
// 3. 合并文件
app.post('/api/merge', async (req, res) => {
const { fileName, fileHash, chunkCount } = req.body;
const chunkDir = path.join(TEMP_DIR, fileHash);
const filePath = path.join(MERGED_DIR, fileName);
try {
// 检查分片是否完整
const chunkPaths = await fse.readdir(chunkDir);
if (chunkPaths.length !== chunkCount) {
return res.status(400).json({ code: 1, message: '分片数量不匹配' });
}
// 创建写入流
const writeStream = fs.createWriteStream(filePath);
// 按索引顺序合并
for (let i = 0; i < chunkCount; i++) {
const chunkPath = path.join(chunkDir, i.toString());
const buffer = await fse.readFile(chunkPath);
writeStream.write(buffer);
}
writeStream.end();
// 清理临时目录
await fse.remove(chunkDir);
res.json({ code: 0, message: '文件合并成功', data: { path: filePath } });
} catch (err) {
res.status(500).json({ code: 1, message: '文件合并失败' });
}
});
// ================== 接口实现 end ================== //
// 定时清理临时目录（可选）
setInterval(() => {
fse.emptyDirSync(TEMP_DIR);
}, 1000 * 60 * 60); // 每小时清理一次
// 启动服务
const PORT = 3000;
app.listen(PORT, () => {
console.log(`Server running on http://localhost:${PORT}`);
});

复制代码

3、后端接口

接口地点方法参数功能/api/checkGETfileHash查询已上传分片索引/api/uploadPOSTchunk, hash, index上传分片/api/mergePOSTfileName, fileHash, chunkCount合并文件四、实现效果

当用户选择文件时，盘算文件的哈希值作为唯一标识，并检查哪些分片已经上传。返回已上传的片断。

文件上传，并发数为3，实现分段上传。

文件中途失败后，会重试并再次上传。

如果用户关闭了浏览器或刷新了页面，当用户再次选择文件时，通过盘算哈希值并与服务器上的记录进行比较，以确定哪些分片已经上传。检查服务器上的上传状态来规复上传。

文件上传乐成，并完成文件合并

五、代码上传

具体的全部代码已上传，可以去顶部下载。
1、安装前端依赖

切换到前端目次web

npm i

复制代码

2、启动前端

npm run dev

复制代码

3、安装服务端依赖

切换到服务端目次node

npm i

复制代码

4、启动服务端

npm run serve

复制代码

通过此示例，可以快速实现一个带友爱交互的大文件断点续传功能，结合 Element Plus 的 UI 组件保证用户体验同等性。

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

欢迎光临 IT评测·应用市场-qidao123.com技术社区 (https://dis.qidao123.com/)

Powered by Discuz! X3.4