希望有一天大家都能在借鉴中创新
最近没有在弄这个文件上传的进度显示问题，css的特效被落下了。只是因为之前做了文件上传，但是并没有真的思考过这些上传进度的问题。前几天看到一个博客，有感而发，觉得这个上传进度的问题迟早是会被遇到的。在这里简单介绍一下一般的实现方法和思路，希望即将踩坑的伙伴，借助这个文章能脱坑更顺利点。
必备工具：
html css java
为了偷懒这里我就直接使用了Springboot框架做为基础项目demo来使用.
基本框架搭建：
使用Bootstrap集成前端样式，本来就不擅长样式编写，这里展示的样式大家就凑合看吧。编写基本的上传文件编辑位置即可，这里重在实现文件分割的业务实现。
实现文件分割的方式可以简单分为两种： ① 定块分割 ② 定长分割
定块分割：不管文件的大小是多少，定义文件分割的块数是制定的。比如我在这个项目中就是用了这种分割方式，定义无论上传的文件大小是多少都将其分割成10块。专业角度来看，这种分割方式还是过于粗糙并且存在很多问题的，但是因为这里为了为展示如何进行文件分割，所以优化分割算法问题可以根据业务问题进行动态变更。
定长分割：相对定块分割来说，这种方式会稍微好点。根据上传的文件大小进行分割文件数量，请求上传接口的次数也根据文件大小变化。
当然，似乎这些方法进行分割似乎都不是最好的，但是文件分割放在客户端是为了减少单个大文件上传导致一个老鼠坏一锅汤的意外情况。
文件分割：
使用定块分割文件，简单的代码实现:
/*切割文件方法*/ function sliceFiles(file, num) { var fileList = []; var singleSize = Math.ceil(file.size / num); var location = 0; while (location < file.size) { fileList.push(file.slice(location, location + singleSize)); location += singleSize; } return fileList; }
经获取到的文件进行上传，需要后端提供文件上传借口，这里文件上传使用FormData的方式。接收文件上传的接口定位为：
文件分片上传的目的是为了实现文件更加迅速的上传，因此我们如果每次对文件进行分割操作之后，在多次循环调用上传文件接口和单独上传相比没有任何意义。因此我们这里吧上传文件的方式设置成异步方法，等待文件分片结束之后同时执行调用方法。
function uploadFileSingle(index, file) { return new Promise(function (resolve, reject) { console.log("content--------", index); var formData = new FormData(); formData.append("file", file); formData.append("index", index); $.ajax({ url: '/file/uploadSingle?_t=' + new Date().getMilliseconds(), type: "POST", processData: false, contentType: false, mimeType: "multipart/form-data", data: formData, success: function (data) { resolve.apply(data); }, error: function (data) { reject.apply(data); }, }); }) }
具体调用时：
代码中提及到的mergeFile方法是为了将分片上传的文件进行合并，因为分片只是目的，合并是为了将上传到的文件能够保持原本的状态。
合并文件的思路：
说道了文件分块上传，就不得不说文件如何合并最终的文件的思路。一个文件还是需要有一个执行的标识，方便最后的收集。分片的文件需要有一定的顺序性的标识，比如 0,1，2之类的数字或者其他信息标识这个文件是属于整个文件分割后的第几块文件。我这里只是为了演示项目效果，我在分割之后只是单纯给他们定义了文件的名字为：0 1 2 3 4 5 6 7 8 9。
因此我最后在合并文件的时候按照数字顺序拿到文件，然后进行合并文件操作即可。
对比效果：
关于这么分片做的好处实际上有很多，我这边做了一执行时间的简单对比。备注：小文件似乎在这里不占优势，因此这里上传的文件的大小为：2.42GB
69.025
62.434
如果有兴趣可以尝试一下，除了我本地的宽带等性能条件的限制，文件稍微大点的时候会有速度上的提升。
文件合并
文件上传结束之后需要主动请求数据进行合并，因此可以在Promise的then(）方法中发起合并数据文件的请求。
后端java代码实现：
接下来我们可以在此基础之上做点有意思的事情，优化上传等待的交互，追加上传进度的展示。
需要用到xhr，具体是的使用可以在ajax方法中获取上传的的进度数据：
xhr: function () { var xhr = new XMLHttpRequest(); xhr.upload.addEventListener('progress', function (e) { var progressRate = (e.loaded / e.total) * 100 + '%'; $(`#${index} div`).attr("style", `width: ${progressRate}`); }); return xhr; }
加上进度展示之后会大大优化普通loading等待导致的交互弱势感觉，看一下最终的效果：
微信公众号：码农的技术分享【更新速度有点慢 多多见谅】
源代码请私信 文件分片
知乎账号：曦曦春风
