用HTML5实现分片上传GB级大文件组件

weixin_52041354

于 2024-09-23 14:13:09 发布

阅读量1k

点赞数 22

文章标签： html5 前端 html

本文链接：https://blog.csdn.net/weixin_52041354/article/details/142456976

版权

前端：vue2,vue3,vue-cli,html5,webuploader
后端：asp.net,jsp,springboot,php,
数据库：MySQL,Oracle,SQL Server,达梦,人大金仓,国产数据库
功能：超大文件上传,文件和文件夹批量上传，断点续传，加密上传，视频上传
技术：百度webuploader，分块，切片，断点续传，秒传，MD5验证，纯JS实现，支持第三方软件集成
要求：免费,开源,永久技术支持
最近这块好像挻火的，今天早上又有一位网友加我微信，也是想了解这块的技术和方案，实际上我的微信之前就已经在网上公开了，但是论坛里面很多网友还是不知道。
昨天晚上论坛里面有一个网友发私信给我，想和我探讨一下这方面的技术问题，他是刚开始接触这块，以前没怎么接触过，都是做的后端，主要是以数据库操作为主，他也是最近接的一个项目，遇到了大文件上传下载的问题，问我有没有好用的组件，其它的要求没有，主要就是好用，方便。这位网友也是刚开始学习这块，很多基础知识都不懂，比如如何分块，后端如何合并，如何保存文件，这些基础知识都不明白，首先就花了大概半个小时把这块的思路给他讲了一遍，后面又花了一个小时帮他搭了一个开发和测试环境，最后又帮他写了测试程序，然后把流程跑通，主要也是指导他来实现这个功能，帮助这位网友调试成功后时间很晚了，所以也没有交流太长时间，准备今天上午再继续探讨的，但是发现他不在线，所以在这里先和大家分享一下思路。
还是从2个方面来说吧，一个是设计思路，一个是逻辑实现。目前来讲的话主要就是了解chrome提供的API是怎么用的，每一个参数是什么功能，这一块可以通过在百度搜索找到答案，找到答案后，另外一点就是开始设计，画出功能的流程图。功能的实现主要分前后端两块。前端主要实现文件的分块上传逻辑，后端主要实现文件块数据的接收和保存。
包教会，免费提供技术支持，免费提供代码调试，免费提供远程协助，免费提供电话支持，免费提供724小时技术支持，免费提供微信支持，免费提供QQ支持
完全开放产品源代码，源代码包含前端，后端，控件源代码，控件源代码必须支持信创国产化环境，源代码必须满足企业100%自主安全可控需求，也就是说我们公司能够自主编译，自主发布，自主部署，自主开发。并且作者必须提供业务逻辑定制开发服务，也就是如果我们公司有新的功能需求，那么作者必须免费提供功能的定制开发服务。
在这里也给大家分享一个好消息，我们的产品现在开源了，昨天下午公司这边安排了一个会议，参会的主要是开发部门的同事，主要就是针对网友的开源反馈进行讨论，因为基本上很多网友都反馈了这个需求，有的网友是大学生，有的网友单纯的就是对这个好奇，还有一部分是企业用户，他们本身就是软件公司，有这个需求，需要完全的自主可控，集成到自己的产品中使用，另一个就是有企业是专门做政府项目的，政府有这个需求，需要支持信创国产化，讨论的结果就是开源，大家可以到这个地址下载，https://drive.weixin.qq.com/s?k=ACoAYgezAAwnB0Dk9D，现在你可以从这个地址上面免费下载，没有密码，不需要付费，完完全全的开源，我们开源也是希望能够与大家一起学习，共同进步，同时我们还提供了产品的免费更新服务。这次开源主要也是为了满足个人学习技术的需求。
那么问题来了，为什么要开源呢？因为有部分企业联系我们说是有这个需求，他们有的是有自己的产品，需要在自己的产品中增加这个功能，有源码的话到时候容易集成，另外后期也能够自己维护，自主性更强。另外很多网友也给我们发私信，也提到了有这个需求。
为什么要向学生开放源代码？因为学生是最有活力，最有激情的，他们有渴望学习知识的激情，同时他们有充足的业余时间，平时能够抽出很多时间来学习。可以说是被他们的热情所感动。在我们的网友群里面，学生占据了很大一部分的数量，主要是大学生的业余时间比较多，有充足的时间来熟悉和深入研究，同时我们也是希望能够建立起一个大学生的技术交流群，这样大家在这个群里能够分享学习和生活中的一些经验。算是互帮互助吧。
除了分享产品和技术以外，我们还会不定期的和大家一起分享商业信息，比如成功案例和最近的一些签约信息。以便广大网友能够更全面的综合评估产品信息。为以后产品的使用提供评估信息。
发私信的网友很多，这里就不一一回了太麻烦了。而且很多网友也都是大学生，平时上线时间也不固定。
用户这边是北京的一家政府单位，需要在业务系统中增加一个文件夹上传功能，上传后在服务端需要保存文件夹的层级结构，同时需要支持IE浏览器
之前在网上也搜索过相关的资料，在论坛里面也与网络交流过，也加过不少QQ群和微信群，但是给出的方案都不太令人满意。网上搜的文章基本上大部分都是重复的，要么就是只有前端，没有后端，要么只有后端，没有前端，很多内容都是重复的，可以看得出来代码都是没有跑过的，没有经过实战测试的，要放在项目里面用那真的是开玩笑了。一方面论坛里面的网页都没有真实的项目经验。几乎大部分的网页都是在纸上谈兵，很多问题完全是凭想象在回答。也不能够提供真实案例，基本上都没有项目的实战经验。有些网上都还是大一的学生，基本回复不能是毫无意义吧，只能说是一文不值。也提到了一些开源的方案，但是都不太满意，主要的一点就是没有人维护了。
离项目需求相差太远，甚至有些学生也在里面不知道从哪里复制的一些代码然后粘贴在上面。离公司的项目需求相差太远，公司这边需要的是一个成熟的商业解决方案，并且是需要能够提供产品的完整源代码。网上提到的一些开源的方案也去看了一下，基本上都没有人维护了，公司这边项目是不敢考虑这些免费的方案的，出了问题根本没办法解决，遇到问题也找不到人。可以说是一个大坑。
这里也告诉大家一个好消息，经技术部讨论我们决定开源了，广大网友可以免费下载源代码：https://drive.weixin.qq.com/s?k=ACoAYgezAAwnB0Dk9D，这里是不收费的。主要也是为了与大家一起交流学习，因为在网上发现很多网友对这块技术还是很感兴趣的，大家共同进步。
后端PHP5,PHP6,PHP7,PHP8，ThinkPHP，
服务器支持Linux，Windows,macOS,CentOS,中标麒麟，银河麒麟，统信，龙芯，华为鲲鹏，
数据库支持MySQL，达梦数据库，人大金仓
需要提供前端源码，后端源码，控件源码
需要提供724小时技术支持，长期技术支持，长期维护服务
需要提供手机，QQ，微信，企业微信，电子邮箱等联系方式
需要支持包含IE在内的全部浏览器
终端需要支持Windows,macOS,Linux,信创国产化环境，中标麒麟，银河麒麟，统信UOS，龙芯，华为
功能需要支持10G，50G,100G大文件上传和断点续传，刷新续传，重启续传
文件夹包含1W，10W，100W个文件和层级结构
支持超大文件分片，分段，分块，分割上传下载，断点续传
支持文件夹上传，下载断点续传，支持文件夹层级结构，层级结构信息保存到数据库，下载的时候同样保留层级结构
支持加密上传，下载加密，端到端加密，国密SM4加密算法，数据加密传输，传输过程中要保证数据是加密的。
前端中实现文件上传下载的三种解决方案(推荐)，VUE上传文件夹的实现，VUE实现大文件分片上传，VUE批量上传文件，HTTP之实现文件上传与下载，
HTTP上传协议之文件流实现，轻松支持大文件上传，NGINX实现浏览器端大文件分块上传，HTML5 文件上传下载的实例代码，
WEBUPLOADER之大文件分段上传、断点续传，HTML DOM INPUT FILE 大文件上传源代码，B/S大附件上传，支持断点续传，VUE处理文件流实现上传下载，VUE 上传大型文件插件(VUE上传视频插件)

视频教程

观看视频：https://www.ixigua.com/7226245960341389859

下载示例

https://gitee.com/xproer/up6-vue-cli

将up6组件复制到项目中

示例中已经包含此目录

引入up6组件

配置接口地址

接口地址分别对应：文件初始化，文件数据上传，文件进度，文件上传完毕，文件删除，文件夹初始化，文件夹删除，文件列表
参考：http://www.ncmem.com/doc/view.aspx?id=e1f49f3e1d4742e19135e00bd41fa3de

处理事件

启动测试

启动成功

效果

数据库

免费资源

免费下载源代码：https://drive.weixin.qq.com/s?k=ACoAYgezAAwbdKCskc
免费下载授权器：https://drive.weixin.qq.com/s?k=ACoAYgezAAw0P06owX

全球唯一

全球唯一商业化开源产品，全球唯一免费提供源代码下载服务，面向政府和企业完全开放源代码，满足政府和企业100%自主安全可控需求。
免费下载产品源代码：https://drive.weixin.qq.com/s?k=ACoAYgezAAwnB0Dk9D

开放源码

完全开源，免费为个人提供产品源代码，功能随便改，逻辑随便改，随时随地，想编就编，想发行就发行，我的代码我作主
免费为个人提供源码讲解服务，功能讲解，逻辑讲解，原理讲解，思路讲解，核心代码功能实现讲解，新业务功能扩展指导，免费提供编译指导，免费提供部署指导
满足个人用户，学习，研究，交流，探索等个性化的需求。
从泽优核心产品代码库中拉取代码