大文件上传实现准备阶段:在大文件上传过程中,需要使用发布订阅模式监控上传进度。发布订阅模式的实现exportdefaultclass{//事件栈eventStacks=[{eventType:'',handlers:[]}];/***获取事件对应的栈索引**@param{string}eventType事件类型*@return{number}stackIndex对应的栈索引不存在-1*/indexOf(eventType){consteventStacks=这个.eventStacks;//已有的事件类型处理栈letstackIndex=-1;for(leti=0;i=0){//已有的事件类型处理直接将对应的处理函数压入栈中this.eventStacks[index].handlers.push(handler);}else{//没有事件,将对应的事件处理器压入栈中constnewEventStack={eventType,handlers:[handler]};这个.eventStacks.push(newEventStack);}};/***触发对应事件**@param{string}eventType自定义事件类型*@param{Object}params参数对象*/emit(eventType,params={}){this.execEvent(eventType,params);};/***执行对应的Event**@param{string}eventType自定义事件类型*@param{Object}params参数对象*/execEvent(eventType,params={}){constindex=this.indexOf(eventType);如果(索引<0){返回;}consthandlers=this.eventStacks[index].handlers;for(leti=0;i=0&&this.eventStacks[index].handlers.length){//存在并且已经入栈consthandlers=this.eventStacks[index].handlers;这个.eventStacks[index].handlers=handlers.filter(currentHandler=>{returncurrentHandler!==handler});}}}文件基于BlobBlobMDN文档Blob类型可以使用slice截取一段基于此我们可以将大文件拆分成许多小文件块上传前端如下:importsuperagentfrom'superagent';importeventEmitterfrom'../util/eventEmitter';//上传单个文件exportconstuploadFile=(file,url)=>{constformData=newFormData();formData.set('图像',文件);控制台日志(文件大小);returnsuperagent.post(url).send(formData);};//获取分块数后的文件constgetFragmentNum=(file,fragmentSize)=>{//fragmentSize分割文件的大小returnMath.ceil(file.size/fragmentSize);};//获取文件片段constgetFileFragment=(file,start,end,fragmentSize)=>{return文件。slice(开始*fragmentSize,结束*fragmentSize);};constgetSlicedFiles=(file,fragmentSize)=>{constslicedFiles=[];//获取文件碎片数constfragmentNum=getFragmentNum(file,fragmentSize);//获取所有碎片文件for(leti=0;i{this.emit('process',{currentIndex:this.currentIndex,res:body,progress:(this.currentIndex+1)/files.length});this.currentIndex++;if(this.currentIndex{console.log(err);});};}后端实现如下:constexpress=require('express');constrouter=express.Router();constmulter=require('multer');constupload=multer();//multer用于接受formdatarouter.post('/upload',upload.single('image'),(req,res)=>{res.send({code:0,file:req.file.size});});module.exports=router;效果如图: