基于WebUploader的前后端分离式大文件分片上传实现

WebUploader 分片上传实现代码（前后端分离） WebUploader 是一个由百度 WebFE（FEX）团队开发的现代文件上传组件，具有 HTML5 和 FLASH 两种运行时，可以在现代浏览器中充分发挥 HTML5 的优势，同时也兼容主流的 IE 浏览器、iOS 和 Android 设备。WebUploader 的一个重要特点是支持大文件分片并发上传，极大的提高了文件上传效率。 在本文中，我们将介绍如何使用 WebUploader 实现分片上传，包括前端和后端的实现代码。 前端实现 在前端，我们使用 WebUploader 的官网 demo 作为基础代码，并对其进行了调整以实现分片上传。我们可以上传图片和文件，当文件超过分片大小时，启用分片上传。分片上传时，我们使用 MD5 校验来达到秒传的效果。分片以后，可以先分片后合并，也可以边分片边合并，我们在这里采用的是边分片边合并的方案。 在前端代码中，我们使用 WebUploader.Uploader.register() 方法注册了一个名为 "webUploaderHookCommand" 的Uploader对象，并定义了 before-send-file 和 before-send 两个事件处理函数。在 beforeSendFile 函数中，我们使用 WebUploader.Deferred 对象来处理文件上传前的准备工作，并使用 md5File 方法计算文件的 MD5 值。在 beforeSend 函数中，我们使用 checkUrl 来检查文件的上传状态。 后端实现 在后端，我们使用 Spring Boot 框架来搭建 REST 服务，并使用 Spring MVC 来处理请求。我们使用 Spring Boot 内置的 Tomcat 插件来运行 Application 的 main 方法，以启动服务。我们还开启了跨域访问，以便在前端可以跨域请求后端服务。 关键代码 前端关键代码： ```javascript WebUploader.Uploader.register({ 'name': 'webUploaderHookCommand', 'before-send-file': 'beforeSendFile', 'before-send': 'beforeSend' }, { beforeSendFile: function(file) { var task = new WebUploader.Deferred(); fileName = file.name; fileSize = file.size; (new WebUploader.Uploader()).md5File(file, 0, 10 * 1024 * 1024).progress(function(percentage) {}).then(function(val) { fileMd5 = val; var url = checkUrl; var data = { type: 0, fileName: fileName, fileMd5: fileMd5 }; // ... }); } }); ``` 使用 WebUploader 实现分片上传可以极大的提高文件上传效率，并且可以在前端和后端之间实现无缝的集成。