2023年7月13日发(作者：)

⽂件分⽚上传之前端⽂件分⽚我们需要上传⼀个⼤⽂件，⽐如上G的视频⽂件，通常我们后端会对上传⽂件进⾏限制，⼀般不宜过⼤，5MB左右为好。如果⽂件过⼤，超出http服务端请求⼤⼩限制，请求时间超时，传输中断导致上传失败，那么我们可以将⽂件进⾏分⽚上传。分⽚上传的原理就是在前端将⽂件分⽚，然后⼀⽚⼀⽚的传给服务端，由服务端对分⽚的⽂件进⾏合并，从⽽完成⼤⽂件的上传。分⽚上传可以解决⽂件上传过程中超时、传输中断造成的上传失败，⽽且⼀旦上传失败后，已经上传的分⽚不⽤再次上传，不⽤重新上传整个⽂件，因此采⽤分⽚上传可以实现断点续传以及跨浏览器上传⽂件。上传流程我们先来理理⽂件上传流程。•1.点击上传按钮，选择要上传的⽂件。•2.预处理⽂件，如果需要实现秒传功能则需要检测⽂件md5，后续⽂章会专门讲解，普通上传可以忽略此步。•3.⽂件分⽚并将分⽚⼀个个上传给后端。•4.全部分⽚上传完成后，前端告诉后端可以合并⽂件了。•5.后端合并⽂件。•6.完成上传。⽂件分⽚vue-simple-uploader已经⾃动将⽂件进⾏分⽚，因此我们只需要在 options 的 chunkSize 中可以设置每个分⽚的⼤⼩。exportdefault{data {return{options: {target: 'localhost:9999/',chunkSize: 1024* 1024* 2//2MB}}}}以上代码我们将每个分⽚⼤⼩设置成2MB，建议不要设⼤了，要看后端限制最⼤上传⼤⼩。如果要上传⼀个10MB的⽂件，那么就会分成5⽚上传，也就是说会请求5次上传url。上传分⽚全部是post请求：看⼀下发送给服务端的参数，其中 chunkNumber 表⽰当前是第⼏个分⽚， totalChunks 代表总的分⽚数，这两个参数都是都是vue-simple-uploader根据我们设置的 chunkSize 来计算的。合并⽂件合并⽂件待所有⽂件分⽚上传成功后，可以给后端发送⼀个合并分⽚的请求，就是告诉后端，所有分⽚上传完成，请将分⽚合成⼀个⽂件。vue-simple-uploader组件中提供了 onFileSuccess ⽅法：onFileSuccess(rootFile, file, response, chunk) {( 'localhost:9999/?action=merge',{fileid: Identifier,chunks: + 1}).then( function(res){if( === 0) {( '上传成功')} else{(e);}}).catch( function(error){(error);});}前端将该⽂件的唯⼀ID以及总分⽚数，或者更多想要传递的参数发给后端，让后端对该⽂件进⾏合并操作。那么后端的合并⽂件的操作是怎样的呢？对于⼤⽂件，如何处理⼤量的分⽚合并过程呢？会不会因为⽂件特⼤将服务端拖垮呢？这些疑问我们在 我们在下⼀篇⽂章中详细介绍。