如何建设万网网站,网站开发大致过程,网络基础知识培训,曹鹏wordpress视频教程大文件上传功能开发纪实#xff1a;我与2G文件的恩怨情仇 客户需求分析 昨天接了个看似简单实则要命的外包项目#xff0c;客户甩来的需求清单让我差点把咖啡喷到屏幕上#xff1a; 支持2G文件批量上传 #x1f631;兼容IE11到Chrome最新版 #x1f92f;要…大文件上传功能开发纪实我与2G文件的恩怨情仇客户需求分析昨天接了个看似简单实则要命的外包项目客户甩来的需求清单让我差点把咖啡喷到屏幕上支持2G文件批量上传兼容IE11到Chrome最新版要能断点续传还要显示上传进度条最后必须开源终身免费维护老板您这是要把我逼成慈善家啊技术选型大戏前端阵容Vue2.6.14老当益壮的框架客户不许用Vue3我们程序员平均年龄45岁AxiosHTTP请求库实际是老板听说业界标准硬塞的SparkMD5文件哈希计算用来判断是否重复上传毕竟2G文件传两遍会死人后端天团PHP 7.4配合客户服务器环境客户PHP8没听过我们用的CentOS 6Workerman长连接处理老板什么你还要我装Swoole七牛云SDK文件存储客户能用免费的吗我们预算只够买咖啡开发过程实录前端分片上传组件Vue版export default { data() { return { progress: 0, chunks: [], isPaused: false } }, methods: { handleFile(e) { const file e.target.files[0] this.splitFile(file) }, splitFile(file) { const chunkSize 5 * 1024 * 1024 // 5MB分片 const totalChunks Math.ceil(file.size / chunkSize) for(let i0; itotalChunks; i) { this.chunks.push({ index: i, loaded: 0, blob: file.slice(i*chunkSize, (i1)*chunkSize) }) } this.uploadChunks() }, async uploadChunks() { for(let chunk of this.chunks) { if(this.isPaused) break const formData new FormData() formData.append(chunk, chunk.blob) formData.append(index, chunk.index) formData.append(total, this.chunks.length) formData.append(md5, await this.calculateMD5(chunk.blob)) await axios.post(/upload, formData, { onUploadProgress: (e) { chunk.loaded e.loaded this.progress (this.chunks.reduce((sum,c)sumc.loaded,0)/file.size)*100 } }) } if(!this.isPaused) this.mergeChunks() }, pauseUpload() { this.isPaused !this.isPaused alert(this.isPaused ? 已暂停老板您终于点对了 : 继续上传求您别点了) } } }PHP后端处理生死时速版query(INSERT INTO progress (md5, index, total) VALUES ($md5,$index,$total));// 合并分片终极生死时刻if($index$total-1){$filefopen(uploads/$md5,w);for($i0;$i$total;$i){fwrite($file,file_get_contents(temp/$md5-$i));}fclose($file);// 通知前端完成客户能发个邮件吗我们不看控制台echojson_encode([statussuccess,urluploads/$md5]);}测试血泪史IE11兼容性测试发现进度条在IE下变成量子进度条既0%又100%断点续传测试故意断网续传结果PHP报错文件已存在客户这功能是坏的大文件压力测试上传2G文件时服务器报警磁盘空间不足客户再买块硬盘从你尾款里扣服务承诺老板的刀架在脖子上免费源代码GitHub已开源求各位大爷点个Star7*24技术支持凌晨3点接到客户电话说进度条不动老板你睡什么睡终身免费升级客户每周提新需求老板这个功能加进去那个也加上加入技术交流群欢迎各位同行加入QQ群374992201在这里你可以吐槽奇葩客户需求比如要能上传但不要显示进度条交流PHP黑魔法如何用正则表达式解析Word文档围观我的秃头过程每天掉发量与代码行数成正比最后温馨提示接外包需谨慎遇到说简单改改就行的客户请立即准备好降压药和速效救心丸安装环境PHP:7.2.14调整块大小NOSQLNOSQL不需要任何配置可以直接访问测试SQL创建数据库您可以直接复制脚本进行创建配置数据库连接安装依赖访问页面进行测试数据表中的数据效果预览文件上传文件刷新续传支持离线保存文件进度在关闭浏览器刷新浏览器后进行不丢失仍然能够继续上传文件夹上传支持上传文件夹并保留层级结构同样支持进度信息离线保存刷新页面关闭页面重启系统不丢失上传进度。批量下载支持文件批量下载下载续传文件下载支持离线保存进度信息刷新页面关闭页面重启系统均不会丢失进度信息。文件夹下载支持下载文件夹并保留层级结构不打包不占用服务器资源。免费下载示例点击下载完整示例