前端上传大文件上传如何做断点续传分片上传断点续传

　　大文件上传是什么
　　不管怎样简单的需求，在量级达到一定层次时，都会变得异常复杂
　　文件上传简单，文件变大就复杂
　　上传大文件时，以下几个变量会影响我们的用户体验服务器处理数据的能力请求超时网络波动
　　上传时间会变长，高频次文件上传失败，失败后又需要重新上传等等
　　为了解决上述问题，我们需要对大文件上传单独处理
　　这里涉及到分片上传及断点续传两个概念分片上传
　　分片上传，就是将所要上传的文件，按照一定的大小，将整个文件分隔成多个数据块（Part）来进行分片上传
　　如下图
　　上传完之后再由服务端对所有上传的文件进行汇总整合成原始的文件
　　大致流程如下：将需要上传的文件按照一定的分割规则，分割成相同大小的数据块；初始化一个分片上传任务，返回本次分片上传唯一标识；按照一定的策略（串行或并行）发送各个分片数据块；发送完成后，服务端根据判断数据上传是否完整，如果完整，则进行数据块合成得到原始文件断点续传
　　断点续传指的是在下载或上传时，将下载或上传任务人为的划分为几个部分
　　每一个部分采用一个线程进行上传或下载，如果碰到网络故障，可以从已经上传或下载的部分开始继续上传下载未完成的部分，而没有必要从头开始上传下载。用户可以节省时间，提高速度
　　一般实现的方式有两种：服务器端返回，告知从哪开始浏览器端自行处理
　　上传过程中将文件在服务器上写为临时文件，等全部写完了（文件上传完），将此临时文件重命名为正式文件即可
　　如果中途上传中断过，下次上传的时候根据当前临时文件大小，作为在客户端读取文件的偏移量，从此位置继续读取文件数据块，上传到服务器从此偏移量继续写入文件即可实现思路
　　个上传组件，需要具备的功能：需要校验文件格式可以上传任何文件，包括超大的视频文件（切片）上传期间断网后，再次联网可以继续上传（断点续传）要有进度条提示已经上传过同一个文件后，直接上传完成（秒传）
　　前后端分工：
　　前端：文件格式校验文件切片、md5计算发起检查请求，把当前文件的hash发送给服务端，检查是否有相同hash的文件上传进度计算上传完成后通知后端合并切片
　　后端：检查接收到的hash是否有相同的文件，并通知前端当前hash是否有未完成的上传接收切片合并所有切片
　　整体思路比较简单，拿到文件，保存文件唯一性标识，切割文件，分段上传，每次上传一段，根据唯一性标识判断文件上传进度，直到文件的全部片段上传完毕
　　下面的内容都是伪代码
　　读取文件内容：constinputdocument。querySelector（input）；input。addEventListener（change，function（）｛varfilethis。files〔0〕；｝）；
　　可以使用md5实现文件的唯一性constmd5codemd5（file）；
　　然后开始对文件进行分割varreadernewFileReader（）；reader。readAsArrayBuffer（file）；reader。addEventListener（load，function（e）｛每10M切割一段，这里只做一个切割演示，实际切割需要循环切割，varslicee。target。result。slice（0，1010241024）；｝）；
　　h5上传一个（一片）constformdatanewFormData（）；formdata。append（0，slice）；这里是有一个坑的，部分设备无法获取文件名称，和文件类型，这个在最后给出解决方案formdata。append（filename，file。filename）；varxhrnewXMLHttpRequest（）；xhr。addEventListener（load，function（）｛xhr。responseText｝）；xhr。open（POST，）；xhr。send（formdata）；xhr。addEventListener（progress，updateProgress）；xhr。upload。addEventListener（progress，updateProgress）；functionupdateProgress（event）｛if（event。lengthComputable）｛进度条｝｝
　　这里给出常见的图片和视频的文件类型判断functioncheckFileType（type，file，back）｛typepngjpgmp4。。。fileinput。changethis。files〔0〕backcallback（boolean）varargsarguments；if（args。length！3）｛back（0）；｝vartypeargs〔0〕；type（pngjpg），pngvarfileargs〔1〕；varbacktypeofargs〔2〕function？args〔2〕：function（）｛｝；if（file。type）｛如果系统无法获取文件类型，则读取二进制流，对二进制进行解析文件类型varimgType〔ffd8ff，jpg89504e，png000146674797069736F6D，mp4000186674797033677035，mp400006674797033677035，mp40000667479704D534E56，mp400006674797069736F6D，mp400018667479706D703432，m4v0000667479706D703432，m4v000146674797071742020，mov00006674797071742020，mov00006D6F6F76，mov4F676753002，ogg1A45DFA3，ogg52494646xxxx41564920，avi（RIFFfileSizefileTypeLIST）（52494646，DC6C5709，41564920，4C495354）〕；vartypeName〔jpg，png，mp4，mp4，mp4，mp4，mp4，m4v，m4v，mov，mov，mov，ogg，ogg，avi，〕；varsliceSizepngjpgjpeg。test（type）？3：12；varreadernewFileReader（）；reader。readAsArrayBuffer（file）；reader。addEventListener（load，function（e）｛varslicee。target。result。slice（0，sliceSize）；readernull；if（sliceslice。byteLengthsliceSize）｛varviewnewUint8Array（slice）；vararr〔〕；view。forEach（function（v）｛arr。push（v。toString（16））；｝）；viewnull；varidxarr。join（）。indexOf（imgType）；if（idx1）｛back（typeName〔idx〕）；｝else｛arrarr。map（function（v）｛if（i3i8）｛returnx；｝returnv；｝）；varidxarr。join（）。indexOf（imgType）；if（idx1）｛back（typeName〔idx〕）；｝else｛back（false）；｝｝｝else｛back（false）；｝｝）；｝else｛vartypefile。name。match（。（w））〔1〕；back（type）；｝｝
　　调用方法如下checkFileType（（movmp4avi），file，function（fileType）｛fileTypemp4，如果file的类型不在枚举之列，则返回false｝）；
　　上面上传文件的一步，可以改成：formdata。append（filename，md5code。fileType）；
　　有了切割上传后，也就有了文件唯一标识信息，断点续传变成了后台的一个小小的逻辑判断
　　后端主要做的内容为：根据前端传给后台的md5值，到服务器磁盘查找是否有之前未完成的文件合并信息（也就是未完成的半成品文件切片），取到之后根据上传切片的数量，返回数据告诉前端开始从第几节上传
　　如果想要暂停切片的上传，可以使用XMLHttpRequest的abort方法代码！DOCTYPEhtmlhtmllangenheadmetacharsetUTF8metanameviewportcontentwidthdevicewidth，initialscale1。0metahttpequivXUACompatiblecontentieedgetitle文件上传titlestyle自定义进度条样式。precentinput〔typerange〕｛webkitappearance：none；清除系统默认样式width：7。8rem；background：webkitlineargradient（ddd，ddd）norepeat，ddd；设置左边颜色为61bd12，右边颜色为dddbackgroundsize：75100；设置左右宽度比例height：0。6rem；横条的高度borderradius：0。4rem；border：1pxsolidddd；boxshadow：0010pxrgba（0，0，0，。125）inset；｝拖动块的样式。precentinput〔typerange〕：：webkitsliderthumb｛webkitappearance：none；清除系统默认样式height：。9rem；拖动块高度width：。9rem；拖动块宽度background：fff；拖动块背景borderradius：50；外观设置为圆形border：solid1pxddd；设置边框｝styleheadbodyh1大文件分片上传测试h1inputidfiletypefilenameavatarinputidsubmitBtntypebuttonvalue提交inputidpauseBtntypebuttonvalue暂停inputtyperangevalue0spanidprecentVal0spanbodyhtml
　　大文件分片上传处理（document）。ready（（）｛constsubmitBtn（submitBtn）；提交按钮constprecentDom（。precentinput）〔0〕；进度条constprecentVal（precentVal）；进度条值对应domconstpauseBtn（pauseBtn）；暂停按钮每个chunk的大小，设置为1兆constchunkSize110241024；获取slice方法，做兼容处理constblobSliceFile。prototype。sliceFile。prototype。mozSliceFile。prototype。webkitSlice；对文件进行MD5加密（文件内容文件标题形式）consthashFile（file）｛returnnewPromise（（resolve，reject）｛constchunksMath。ceil（file。sizechunkSize）；letcurrentChunk0；constsparknewSparkMD5。ArrayBuffer（）；constfileReadernewFileReader（）；functionloadNext（）｛conststartcurrentChunkchunkSize；constendstartchunkSizefile。size？file。size：startchunkSize；fileReader。readAsArrayBuffer（blobSlice。call（file，start，end））；｝fileReader。onloade｛spark。append（e。target。result）；AppendarraybuffercurrentChunk1；if（currentChunkchunks）｛loadNext（）；｝else｛console。log（finishedloading）；constresultspark。end（）；通过内容和文件名称进行md5加密constsparkMd5newSparkMD5（）；sparkMd5。append（result）；sparkMd5。append（file。name）；consthexHashsparkMd5。end（）；resolve（hexHash）；｝｝；fileReader。onerror（）｛console。warn（文件读取失败！）；｝；loadNext（）；｝）。catch（err｛console。log（err）；｝）；｝提交submitBtn。on（click，async（）｛varpauseStatusfalse；varnowUploadNums01。读取文件constfileDom（file）〔0〕；constfilesfileDom。files；constfilefiles〔0〕；if（！file）｛alert（没有获取文件）；return；｝2。设置分片参数属性、获取文件MD5值consthashawaithashFile（file）；文件hashconstblockCountMath。ceil（file。sizechunkSize）；分片总数constaxiosPromiseArray〔〕；axiosPromise数组文件上传constuploadFile（）｛conststartnowUploadNumschunkSize；constendMath。min（file。size，startchunkSize）；构建表单constformnewFormData（）；blobSlice。call（file，start，end）方法是用于进行文件分片form。append（file，blobSlice。call（file，start，end））；form。append（index，nowUploadNums）；form。append（hash，hash）；ajax提交分片，此时contenttype为multipartformdataconstaxiosOptions｛onUploadProgress：e｛nowUploadNums；判断分片是否上传完成if（nowUploadNumsblockCount）｛setPrecent（nowUploadNums，blockCount）；uploadFile（nowUploadNums）｝else｛4。所有分片上传后，请求合并分片文件axios。all（axiosPromiseArray）。then（（）｛setPrecent（blockCount，blockCount）；全部上传完成axios。post（filemergechunks，｛name：file。name，total：blockCount，hash｝）。then（res｛console。log（res。data，file）；pauseStatusfalse；alert（上传成功）；｝）。catch（err｛console。log（err）；｝）；｝）；｝｝，｝；加入到Promise数组中if（！pauseStatus）｛axiosPromiseArray。push（axios。post（fileupload，form，axiosOptions））；｝｝设置进度条functionsetPrecent（now，total）｛varprencentValue（（nowtotal）100）。toFixed（2）precentDom。valueprencentValueprecentVal。text（prencentValue）precentDom。style。cssTextbackground：webkitlineargradient（top，059CFA，059CFA）00｛prencentValue｝100norepeat｝暂停pauseBtn。on（click，（e）｛pauseStatus！pauseStatus；e。currentTarget。valuepauseStatus？开始：暂停if（！pauseStatus）｛uploadFile（nowUploadNums）｝｝）uploadFile（）；｝）；｝）
　　文件上传和合并分片文件接口（node）constRouterrequire（koarouter）；constmulterrequire（koamulter）；constfsrequire（fsextra）；constpathrequire（path）；constrouternewRouter（）；const｛mkdirsSync｝require（。。utilsdir）；constuploadPathpath。join（dirname，upload）；constchunkUploadPathpath。join（uploadPath，temp）；constuploadmulter（｛dest：chunkUploadPath｝）；文件上传接口router。post（fileupload，upload。single（file），async（ctx，next）｛const｛index，hash｝ctx。req。body；constchunksPathpath。join（chunkUploadPath，hash，）；if（！fs。existsSync（chunksPath））mkdirsSync（chunksPath）；fs。renameSync（ctx。req。file。path，chunksPathhashindex）；ctx。status200；ctx。res。end（Success）；｝）合并分片文件接口router。post（filemergechunks，async（ctx，next）｛const｛name，total，hash｝ctx。request。body；constchunksPathpath。join（chunkUploadPath，hash，）；constfilePathpath。join（uploadPath，name）；读取所有的chunksconstchunksfs。readdirSync（chunksPath）；创建存储文件fs。writeFileSync（filePath，）；if（chunks。length！totalchunks。length0）｛ctx。status200；ctx。res。end（切片文件数量不符合）；return；｝for（leti0；itotal；i）｛追加写入到文件中fs。appendFileSync（filePath，fs。readFileSync（chunksPathhashi））；删除本次使用的chunkfs。unlinkSync（chunksPathhashi）；｝fs。rmdirSync（chunksPath）；文件合并成功，可以把文件信息进行入库。ctx。status200；ctx。res。end（Success）；｝）使用场景大文件加速上传：当文件大小超过预期大小时，使用分片上传可实现并行上传多个Part，以加快上传速度网络环境较差：建议使用分片上传。当出现上传失败的时候，仅需重传失败的Part流式上传：可以在需要上传的文件大小还不确定的情况下开始上传。这种场景在视频监控等行业应用中比较常见小结
　　当前的伪代码，只是提供一个简单的思路，想要把事情做到极致，我们还需要考虑到更多场景，比如切片上传失败怎么办上传过程中刷新页面怎么办如何进行并行上传切片什么时候按数量切，什么时候按大小切如何结合WebWorker处理大文件上传如何实现秒传
　　人生又何尝不是如此，极致的人生体验有无限可能，越是后面才发现越是精彩
　　给大家分享我收集整理的各种学习资料，前端小白交学习流程，入门教程等回答下面是学习资料参考。
　　前端学习交流、自学、学习资料等推荐知乎