之前看过相关文章,但一直没有亲手实现过。这个东西就是为了达到这个目的而创造的。前端流程图主要技术点使用Blob.prototype.slice切片进行切片,获取切片md5作为唯一标识。具体代码//计算切片个数constpage=Math.ceil(file.size/size);//初始位置letstart=0;//等待异步任务队列constpromiseList=[];for(leti=0;i{returnreadFile(path.join(__dirname,'../files/',key));});//异步等待结果constfilesBuffer=awaitPromise.all(files);//注意:合并切片constbuffer=Buffer.concat(filesBuffer);//写入fs.writeFileSync(path.join(__dirname,'../files/',文件名),缓冲区);//删除切片文件keys.forEach(key=>{fs.unlink(path.join(__dirname,'../files/',key),function(err){if(err){throwerr;}})});}文件容器管理使用lowdb存储文件信息,使用文件md5作为文件id接口介绍POST/fileStatusinterfaceReqData{"key":"",//文件md5"length":0,//个数slices"name":""//文件名}ResData{"key":"",//文件Md5"length":0,//切片数"filename":"",//文件名"blocks":[],//完成的切片列表"url"?:""//文件M地址}容器数据格式{"key":"",//md5"length":0,//切片数"filename":"",//文件名"blocks":[]//完成切片的个数}切片信息{"index":0,//切片下标"key":""//这里的切片md5也作为切片文件名}切片管理切片上传成功后,需要对其进行管理和标记。根据切片下标判断切片位置,根据文件容器判断切片上传状态,然后Slice集成接口介绍POST/uploadBlock接口ReqDataFormDatakey:sliceidindex:subscriptfile:slicedataparent:filecontaineridResData{"code":200}异步请求优化使用asyncmapLimit限制异步任务的个数,避免一次性请求过多之后进行中的请求过多,避免中断时过多浪费资源//控制异步并发,避免块数过多失败导致成功数减少//限制并发数为3async.mapLimit(blocks,3,async(file,callback)=>{//调用上传块awaituploadBlcok(file);},async()=>{//单任务执行完成后获取当前文件状态,这里可以获取文件地址});如何运行安装依赖npminstall运行npmrundev浏览器打开http://127.0.0.1:9870相关信息浏览器文件MD5加密asyncmap限制??前端大文件上传端https://www.notbucai.comhttps://github.com/notbucai/examples