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

WebUploader+PHP如何实现大文件分片上传的断点续传方案？

news 2026/3/26 18:22:42

咱福州网工仔实锤了！最近为了毕设焦头烂额——要搞个能打的大文件管理系统，还要兼容IE8这种“上古浏览器”（学校机房那台Win7+IE9的老古董，点个按钮都像在玩心跳）。找了一圈后端教程，不是“自己悟”就是“付费课”，现在连后端代码都要自己摸着石头过河……今天先把前端代码整明白，至少毕设演示时能“表面光”！

前端目标：用原生JS+WebUploader，搞定10G上传+断点续传+文件夹

咱一个后端小白，后端Python还在啃《笨办法学Python》，所以前端必须“能跑能用”——核心就三点：

兼容老浏览器：IE8用Flash，IE9+用H5，龙芯/红莲花这些信创浏览器也能跑。
断点续传：关浏览器/重启电脑都不怕，进度信息存本地（localStorage）。
文件夹上传：保留层级结构（比如/课程设计/文件管理系统/代码），IE8手动输路径凑合用。

前端代码：Vue3 + WebUploader（附详细注释）

先上干货！以下是核心代码，包含文件选择、分片上传、断点查询、文件夹处理，注释写得贼详细，小白也能看懂。

1. 安装依赖（VS Code里操作）

首先得装WebUploader和加密库（AES加密用）：

# 在项目根目录敲命令（Vue3用npm或yarn都行）npminstallwebuploader crypto-js --save

2. 前端组件代码（src/components/BigFileUpload.vue）

import SparkMD5 from 'spark-md5'; // 计算文件MD5（断点续传关键） import WebUploader from 'webuploader'; // 引入WebUploader库 import CryptoJS from 'crypto-js'; // AES加密库（传输加密） export default { data() { return { uploader: null, // WebUploader实例 progress: 0, // 上传进度百分比 isUploading: false, // 是否正在上传 currentFile: null, // 当前处理的文件 fileMd5: '', // 当前文件的MD5（唯一标识，用于断点） chunkSize: 2 * 1024 * 1024, // 分片大小2MB（10G分5000片） uploadedChunks: [], // 已上传的分片序号（从本地localStorage读） encryptKey: 'user-defined-key-123' // 加密密钥（实际项目要让用户输入！） }; }, mounted() { this.initUploader(); // 初始化上传组件 }, methods: { // 初始化WebUploader（兼容IE8的Flash模式） initUploader() { // 配置WebUploader（重点参数注释） this.uploader = WebUploader.create({ swf: '/static/webuploader/Uploader.swf', // Flash路径（IE8必须，需提前下载） server: '/api/upload/chunk', // 后端分片接收接口（Python写的，后面说） pick: '#filePicker', // 选择文件按钮 dnd: '#dndArea', // 拖拽区域 paste: document.body, // 粘贴上传（可选） chunked: true, // 开启分片上传（大文件必须） chunkSize: this.chunkSize, // 分片大小2MB compress: false, // 不压缩（大文件压缩会丢内容） fileNumLimit: 100, // 最多同时传100个文件（防崩溃） fileSizeLimit: 10 * 1024 * 1024 * 1024, // 单个文件最大10G accept: { title: 'All Files', extensions: '*' // 允许所有格式（按需改） }, // 自定义参数（传给后端） formData: { encrypt: 'true', // 告诉后端要加密传输 key: this.encryptKey // 加密密钥（实际让用户输入更安全） } }); // 绑定事件：文件加入队列时触发（计算MD5） this.uploader.on('fileQueued', (file) => { this.currentFile = file; this.progress = 0; this.uploadedChunks = []; // 重置已上传分片 this.calculateFileMd5(file); // 计算文件MD5（断点续传的核心） }); // 绑定事件：分片上传前（查询已上传的分片） this.uploader.on('uploadBeforeSend', (obj, data) => { data.md5 = this.fileMd5; // 传MD5给后端查进度 data.chunk = obj.chunk; // 当前分片序号（0开始） data.chunks = obj.chunks; // 总分片数 }); // 绑定事件：上传进度更新（实时显示进度条） this.uploader.on('uploadProgress', (file, percentage) => { this.progress = Math.round(percentage * 100); }); // 绑定事件：单个分片上传成功（记录已上传分片到localStorage） this.uploader.on('uploadSuccess', (file, response) => { if (response.code === 200) { const { chunk } = response.data; this.uploadedChunks.push(chunk); // 记录已上传的分片序号 localStorage.setItem(`upload_${this.fileMd5}`, JSON.stringify(this.uploadedChunks)); // 存本地防丢失 } }); // 绑定事件：全部分片上传完成（合并文件） this.uploader.on('uploadFinished', (file) => { this.isUploading = false; this.$message.success(`${file.name} 上传完成！`); // 清空本地存储的进度（可选） localStorage.removeItem(`upload_${this.fileMd5}`); }); // 绑定事件：上传出错（提示用户） this.uploader.on('error', (type) => { this.isUploading = false; let msg = ''; switch (type) { case 'F_EXCEED_SIZE': msg = '文件超过10G限制！'; break; case 'Q_EXCEED_NUM_LIMIT': msg = '同时上传的文件太多！'; break; default: msg = `上传失败：${type}`; } this.$message.error(msg); }); }, // 计算文件MD5（断点续传的唯一标识） calculateFileMd5(file) { const blobSlice = File.prototype.slice || File.prototype.mozSlice || File.prototype.webkitSlice; const chunks = Math.ceil(file.size / this.chunkSize); // 总分片数 const spark = new SparkMD5.ArrayBuffer(); const fileReader = new FileReader(); // 分片读取文件内容，计算MD5（大文件可能有点慢，耐心等） const loadNext = (currentChunk) => { const start = currentChunk * this.chunkSize; const end = Math.min(start + this.chunkSize, file.size); fileReader.readAsArrayBuffer(blobSlice.call(file, start, end)); }; fileReader.onload = (e) => { spark.append(e.target.result); // 累加当前分片内容 const currentChunk = Math.floor(e.target.result.byteLength / this.chunkSize); if (currentChunk < chunks - 1) { loadNext(currentChunk); } else { this.fileMd5 = spark.end(); // 所有分片读完，得到最终MD5 this.queryUploadedChunks(); // 查询后端已上传的分片 } }; loadNext(0); // 开始计算 }, // 查询后端已上传的分片（从localStorage或后端接口） async queryUploadedChunks() { try { // 先从localStorage找（防止关浏览器后进度丢失） const localChunks = localStorage.getItem(`upload_${this.fileMd5}`); if (localChunks) { this.uploadedChunks = JSON.parse(localChunks); } else { // 没本地记录，调后端接口查（Python接口返回已上传的分片序号） const res = await this.$http.get(`/api/upload/chunks?md5=${this.fileMd5}`); this.uploadedChunks = res.data.uploadedChunks || []; } // 告诉WebUploader跳过已上传的分片（关键！） this.uploader.options.chunkRetry = 0; // 失败不重试（已上传的分片跳过） this.uploader.upload(); // 开始上传 } catch (err) { console.error('查询已上传分片失败', err); this.$message.error('获取上传进度失败，请重试'); } }, // 开始上传 startUpload() { if (!this.currentFile) { this.$message.warning('请先选择文件或文件夹！'); return; } this.isUploading = true; this.uploader.upload(); }, // 暂停上传 pauseUpload() { this.uploader.stop(); this.isUploading = false; }, // 清空队列 clearQueue() { this.uploader.clearQueue(); this.progress = 0; this.currentFile = null; this.uploadedChunks = []; } } }; .upload-container { max-width: 800px; margin: 20px auto; padding: 20px; border: 1px solid #eee; border-radius: 8px; } .placeholder { min-height: 150px; border: 2px dashed #ccc; border-radius: 4px; display: flex; flex-direction: column; align-items: center; justify-content: center; cursor: pointer; } .tip { color: #666; font-size: 12px; margin-top: 10px; } .status-bar { margin-top: 15px; } .progress-wrap { margin-bottom: 15px; } .progress-bar { width: 100%; height: 20px; background: #f3f3f3; border-radius: 10px; overflow: hidden; margin: 5px 0; } .progress { height: 100%; background: #409eff; transition: width 0.3s; } .btn-group button { margin-right: 10px; padding: 5px 15px; border: 1px solid #ddd; border-radius: 4px; cursor: pointer; } .btn-group button:disabled { background: #f5f5f5; color: #999; cursor: not-allowed; }

代码关键功能说明（小白必看）

兼容IE8：靠WebUploader的Flash模式（swf文件），记得把Uploader.swf放在public/static/webuploader/目录下（Vue3默认静态资源路径）。
断点续传：
- 文件加入队列时，用SparkMD5计算文件的MD5（唯一标识）。
- 上传前调用queryUploadedChunks，从本地localStorage或后端接口查已上传的分片。
- WebUploader会自动跳过已上传的分片，只传未传的部分。
文件夹上传：
- IE9+支持webkitdirectory属性（WebUploader自动处理），拖拽文件夹时会保留层级结构（比如/课程设计/文件管理系统）。
- IE8不支持，只能手动让用户输入文件夹路径（比如在文件名前加课程设计/前缀），后端按路径创建文件夹。
加密传输：
- 前端用CryptoJS.AES.encrypt加密文件内容（示例里没写，可加在uploadBeforeSend事件里）。
- 后端用相同的密钥解密（Python代码里实现）。

毕设演示注意事项（保命指南）

本地测试：
- 用Win7虚拟机装IE9，测试文件夹上传和断点续传（上传到50%时关闭浏览器，重新打开继续传）。
- 用IE8虚拟机测试Flash上传（需允许浏览器运行Flash，学校机房可能需要调整安全设置）。
进度保存：
- 关闭浏览器再打开，刷新页面，看进度是否还在（依赖localStorage）。
大文件测试：
- 用10G的测试文件（网上找“10G测试文件生成器”），看分片上传是否正常，有没有内存溢出。