作为一名前端开发工程师我近期接手了公司一个有些年头的旧项目改造工作。这次改造的核心需求是要给这个旧项目增添大文件上传功能尤其得支持 10G 左右文件的上传并且还要具备断点续传的能力。在众多解决方案中我选用了百度开源组件 webuploader 来实现这一功能。这个组件在理论上具备处理大文件上传和断点续传的能力就像是一把理论上能打开难题之锁的钥匙所以我对它寄予了厚望。然而在集成 webuploader 的过程中我遭遇了诸多棘手问题。比如在实际操作时发现部分功能与项目现有架构存在兼容性问题就像不同形状的拼图块很难完美契合在一起。我尝试在百度上搜索相关问题的解决办法可得到的结果大多是一些零散且不够深入的信息根本没有切实可行的方案。更让我无奈的是我想联系 webuploader 的开发人员寻求帮助却发现根本联系不上就像在大海中航行时失去了指引方向的灯塔让我感到十分迷茫和无助。这不禁让我感慨开源的东西虽然有其便利性和开放性但在实际使用中一旦遇到问题缺乏官方有效的支持还是存在很大的不完善之处。不过即便困难重重我还是没有放弃。我回忆起之前处理类似问题的经验同时结合项目自身的特点一点点地摸索着前进。从设计思路来看我得先深入了解 chrome 提供的 API 的使用方法搞清楚每一个参数的具体功能这部分内容我通过在百度上反复搜索才勉强拼凑出了一些有用的信息。找到答案后我便开始进行功能设计画出详细的流程图就像绘制一张精确的地图为后续的开发工作指明方向。在功能实现方面主要分为前端和后端两部分。前端主要负责实现文件的分块上传逻辑这需要精确地控制文件的分割和上传顺序就像指挥一场精密的交响乐演奏每一个音符都要准确无误。而后端则要实现文件块数据的接收和保存确保数据能够完整、准确地存储就像一个可靠的仓库管理员守护着每一份重要的文件。虽然目前项目还在推进中但我已经能预见到未来可能还会遇到各种问题。不过我相信凭借自己的努力和不断探索最终一定能够成功完成这个项目改造任务让旧项目焕发出新的活力。另外我还了解到一些相关背景信息。之前有一些客户比如汽车制造行业的领军企业他们自身有成熟的业务系统为了提升生产效率和管理流程会寻求将新产品集成到现有系统中并且要求提供完整源代码以满足自主可控的需求就像把自家房子的钥匙紧紧握在自己手中。而我们公司也会提供全方位的服务包括技术支持、培训以及后续的定制开发等。还有一些网友也会遇到类似的技术问题比如有网友刚开始接触大文件上传下载这块在论坛发私信向我请教。他是做后端的主要操作数据库最近接项目遇到了难题问我有没有好用的组件。我花时间给他讲解思路帮他搭建开发和测试环境还写了测试程序指导他实现功能。从更广泛的层面来看企业级文件传输解决方案有着丰富的功能。它包含文件上传和下载功能支持文件夹上传和下载采用出色的跨浏览器架构设计能满足企业在跨浏览器、跨平台、信创国产化环境、内网、多项目、多产品使用等方面的需求还能实现自主可控、自主研发和自主授权。同时也能满足大型集团批量使用、央企加密安全使用和自主可控等需求。对于个人来说能满足免费使用、开源项目使用、多项目使用、多产品使用等需求外包团队可用于多项目、多产品开发还能实现快速开发也能满足个人学习、兴趣爱好、毕业设计、技术研究等需求。目前这个开源方案受到了很多关注每天都有网友下载除了国内一线互联网大厂还有各领域的头部企业如汽车制造行业的比亚迪、吉利芯片领域的欣奕华金融领域的中兴IT 领域的东软等都在使用。这个方案支持文件夹包含大量文件和层级结构支持超大文件分片、分段、分块、分割上传下载和断点续传支持文件夹上传、下载断点续传并保留层级结构还支持多种加密方式采用国密 SM4 加密算法保证数据加密传输。在技术实现上涉及 VUE 批量上传文件、HTTP 实现文件上传与下载等多种技术手段。就像我这次项目用到的 webuploader它的大文件分段上传、断点续传等功能在理想状态下是很强大的但在实际集成中还是遇到了不少麻烦。将webuploader组件复制到项目中示例中已经包含此目录引入webuploader组件配置接口地址接口地址分别对应文件初始化文件数据上传文件进度文件上传完毕文件删除文件夹初始化文件夹删除文件列表参考http://www.ncmem.com/doc/view.aspx?ide1f49f3e1d4742e19135e00bd41fa3de处理事件启动测试启动成功效果数据库效果预览文件上传文件刷新续传支持离线保存文件进度在关闭浏览器刷新浏览器后进行不丢失仍然能够继续上传文件夹上传支持上传文件夹并保留层级结构同样支持进度信息离线保存刷新页面关闭页面重启系统不丢失上传进度。批量下载支持文件批量下载下载续传文件下载支持离线保存进度信息刷新页面关闭页面重启系统均不会丢失进度信息。文件夹下载支持下载文件夹并保留层级结构不打包不占用服务器资源。下载示例点击下载完整示例