J*aScript实现大文件分片上传_j*ascript实战_石家庄创泽智能科技有限公司

新闻中心 NEWS CENTER

您当前位置：首页 > 新闻中心 > 网络学院

JaScript实现大文件分片上传_jascript实战

2025-11-01

浏览次数：次

返回列表

分片上传通过将大文件切割为小块依次传输，解决超时与内存问题。前端使用File API切片并用FormData逐个发送，服务端暂存后合并。需协同设计协议字段，并可扩展断点续传、进度显示、错误重试等机制以提升稳定性与用户体验。

javascript实现大文件分片上传_javascript实战

大文件上传是前端开发中常见的需求，直接上传几百MB甚至几个GB的文件容易导致请求超时、内存溢出或网络中断。为了解决这个问题，J*aScript可以通过分片上传的方式将大文件切分成多个小块，逐个上传，提升稳定性和用户体验。

一、文件分片的基本原理

分片上传的核心思想是将一个大文件按照固定大小（如5MB）切割成多个Blob对象，然后依次或并发上传这些片段。服务端接收后按序合并，最终还原为原始文件。

实现的关键步骤包括：

使用File API读取用户选择的文件
通过slice()方法对文件进行切片
构造FormData发送每个分片到服务器
服务端记录已上传分片并支持断点续传（可选）
所有分片上传完成后通知服务端合并

二、前端实现分片上传逻辑

以下是一个简洁但完整的J*aScript实现示例：

function uploadFileInChunks(file, chunkSize = 5 * 1024 * 1024) {
  const chunks = [];
  let start = 0;
<p>// 切割文件
while (start < file.size) {
const end = Math.min(start + chunkSize, file.size);
chunks.push(file.slice(start, end));
start = end;
}</p><p>// 上传每个分片
chunks.forEach((chunk, index) => {
const formData = new FormData();
formData.append('file', chunk);
formData.append('filename', file.name);
formData.append('totalChunks', chunks.length);
formData.append('chunkIndex', index);</p><pre class="brush:php;toolbar:false;">fetch('/upload', {
  method: 'POST',
  body: formData
})
.then(response => response.json())
.then(data => {
  if (data.success) {
    console.log(`分片 ${index} 上传成功`);
    // 可更新进度条
  }
})
.catch(err => {
  console.error(`分片 ${index} 上传失败`, err);
});

}); }

HTML部分只需一个input元素：

I-Shop购物系统

部分功能简介：商品收藏夹功能热门商品最新商品分级价格功能自选风格打印结算页面内部短信箱商品评论增加上一商品，下一商品功能增强商家提示功能友情链接用户在线统计用户来访统计用户来访信息用户积分功能广告设置用户组分类邮件系统后台实现更新用户数据系统图片设置模板管理CSS风格管理申诉内容过滤功能用户注册过滤特征字符IP库管理及来访限制及管理压缩，恢复，备份数据库功能上传文件管理商品类别管理商品添加/修改/

0 查看详情 I-Shop购物系统

<input type="file" onchange="uploadFileInChunks(this.files[0])" />

三、服务端配合处理（Node.js示例）

前端上传的是分片，服务端需要暂存并最终合并。以Express为例：

const express = require('express');
const multer = require('multer');
const fs = require('fs');
const path = require('path');
<p>const app = express();
const upload = multer({ dest: 'uploads/' }); // 临时存储路径</p><p>// 接收分片
app.post('/upload', upload.single('file'), (req, res) => {
const { filename, chunkIndex, totalChunks } = req.body;
const chunkPath = path.join('chunks', <code>${filename}.part${chunkIndex}</code>);</p><p>fs.renameSync(req.file.path, chunkPath);</p><p>// 检查是否全部上传完毕
let uploaded = 0;
for (let i = 0; i < totalChunks; i++) {
if (fs.existsSync(path.join('chunks', <code>${filename}.part${i}</code>))) {
uploaded++;
}
}</p><p>if (uploaded == totalChunks) {
mergeChunks(filename, totalChunks);
return res.json({ success: true, message: '上传完成，已合并' });
}</p><p>res.json({ success: true });
});</p><p>function mergeChunks(filename, totalChunks) {
const writeStream = fs.createWriteStream(path.join('uploads', filename));
for (let i = 0; i < totalChunks; i++) {
const chunkPath = path.join('chunks', <code>${filename}.part${i}</code>);
const data = fs.readFileSync(chunkPath);
writeStream.write(data);
fs.unlinkSync(chunkPath); // 删除临时分片
}
writeStream.end();
}