文章涉及的源代码在GitHub上，查看源代码。
项目安装
这是一个 Node 项目，可以使用常规的方式进行设置，如果已经有一个项目，则可以继续执行该项目，完全没有问题。如果是全新开始，请执行以下操作：
下载并安装 Node，它会全局上安装 npm；
安装 Yeoman ，npm install -g yo ，并全局安装脚手架 npm install -g generator-norm ；
创建项目文件所在的文件夹；
打开终端并使用 cd 命令导航到项目目录，例如 cd multifile-uploader；
运行命令 npm init -y 初始化 npm 项目，生成简单的 package.json；
运行命令 yo norm 初始化项目基础依赖；
使用 npm install express --save 命令安装 express 模块。
运行 yarn start ，即可打开预览
工作原理
现在来了解这个系统是如何工作的，此应用程序有 2 个流程需要服务器和客户端之间的严格协调。
上传流程：获取新文件，发送有关文件信息到服务器，服务器返回一个密钥（id），在发送文件块时需要使用该密钥（id），允许它跟踪文件并能够在以后发生中断时恢复它上传。
恢复上传流程：向服务器查询提供的名称和密钥（id）的文件的状态，以便服务器可以响应上传停止的块大小，以便上传可以从该点继续。
还有第四个端点，用于获取所有待处理的文件密钥以恢复上传，以防上传停止并且想在几天后恢复。对于本教程，一旦上传并获取 ID，会将其保留在客户端以恢复它们，但是如果关闭浏览器选项卡，ID 将丢失，并且将无法恢复。
客户端
这里的客户端主要是WEB应用端。这个项目的HTML非常简单，修改文件 app/index.html ，下面是核心的代码。
<divclass="rowmarketing"><divclass="col-lg-12"><labelclass="upload-btn">上传文件<inputtype="file"multipleaccept="video/*"id="file-upload-input"style="display:none"/></label></div></div>
这里的重要细节是 input 属性必须具有 multiple 属性以允许用户选择多个文件，还可以选择使用 accept 属性标识允许上传的文件类型。
对于上传文件，通过 input 的 id 属性获取元素对象，并为其绑定事件 change 来监听用户文件的选择。
constelemFileInput=document.getElementById("file-upload-input");elemFileInput.addEventListener("change",(e)=>{//handlefilehere});下面代码定义了 uploadFiles 方法：
constuploadFiles=(()=>{constURL=`http://localhost:3008/`;constENDPOINTS={UPLOAD:`${URL}upload`,UPLOAD_STATUS:`${URL}/upload-status`,UPLOAD_REQUEST:`${URL}/upload-request`,};constdefaultOptions={url:ENDPOINTS.UPLOAD,startingByte:0,fileId:"",onAbort(){},onProgress(){},onError(){},onComplete(){},};return(files,options=defaultOptions)=>{//handlefileobjectshere};})();上面的代码返回一个函数，它接受一个文件列表和一个可选的选项对象来处理上传。涉及的三个 API 端点如下：
upload：传输文件块
upload-status：查询文件上传状态，如果开始上传和停止或有什么东西中断了，迫使选择一个文件再次上传，这将返回关于文件停止的位置、在中断之前上传了多少块的信息。
upload-request：通知服务器要上传的内容，以便服务器设置密钥并在上传开始时跟踪文件。
选项对上传的各个阶段或状态进行回调（中止、进度、错误和完成），起始字节是从要发起上传的文件流的哪个位置开始，文件 id 是标识文件的一种方法。
文件上传UI/UX处理
在服务器上设置上传端点之前，最好在客户机上处理它，因为这将帮助服务器端更有意义。
对于这一部分，需要一些处理UI的东西。这部分可以很容易地用任何UI库或框架来完成，比如Vue和Angular。
类似于 uploadFiles 函数，需要与 uploadFiles 交互并更新UI的 uploadAndTrackFiles 。uploadAndTrackFiles 是一个函数，它获取一个文件列表并调用uploadFiles，然后通过将页面体上的每个文件元素进度指示器附加到 progressBox 容器中来设置视图。
在内部，它还有所有的回调函数来跟踪和响应每个文件状态。
constuploadAndTrackFiles=(()=>{constprogressBox=document.createElement("div");letuploader=null;constsetFileElement=(file)=>{//createfileelementhere};constonProgress=(e,file)=>{};constonError=(e,file)=>{};constonAbort=(e,file)=>{};constonComplete=(e,file)=>{};return(uploadedFiles)=>{[...uploadedFiles].forEach(setFileElement);document.body.appendChild(progressBox);uploader=uploadFiles(uploadedFiles,{onProgress,onError,onAbort,onComplete,});};})();从 change 事件侦听器中调用 uploadAndTrackFiles 传递文件列表。
elemFileInput.addEventListener("change",(e)=>{uploadAndTrackFiles(e.currentTarget.files);e.currentTarget.value="";});现在要做的一件事是清除之后的 input 的值，这样浏览器就就不会阻止用户添加更多的文件。到目前为止，可以回到 uploadFiles 函数中处理上传。
文件上传逻辑
回到 uploadFiles 函数，循环遍历文件列表，并调用处理请求初始化的 uploadFile。发起请求后，将返回一个对象，返回的对象为公开函数，当使用文件调用该函数集。
constuploadFiles=(()=>{constURL=`http://localhost:3008/`;constENDPOINTS={UPLOAD:`${URL}upload`,UPLOAD_STATUS:`${URL}/upload-status`,UPLOAD_REQUEST:`${URL}/upload-request`,};constdefaultOptions={url:ENDPOINTS.UPLOAD,startingByte:0,fileId:"",onAbort(){},onProgress(){},onError(){},onComplete(){},};constfileRequests=newWeakMap();constuploadFile=(file,options)=>{};constabortFileUpload=(file)=>{};constretryFileUpload=(file)=>{};constclearFileUpload=(file)=>{};constresumeFileUpload=(file)=>{};return(files,options=defaultOptions)=>{[...files].forEach((file)=>{uploadFile(file,{...defaultOptions,...options});});return{abortFileUpload,retryFileUpload,clearFileUpload,resumeFileUpload,};};})();因为可以同时上传多个文件，将定义 WeakMap （与Map相比，键名是弱引用，键值可以是任意的，键名所指向的对象可以被垃圾回收）类型的变量 fileRequests 来跟踪所有文件。
uploadFile 函数只是让服务器知道它应该期待一个文件很快被上传，并提供文件名。
constuploadFiles=(()=>{constURL=`http://localhost:3008/`;constENDPOINTS={UPLOAD:`${URL}upload`,UPLOAD_STATUS:`${URL}/upload-status`,UPLOAD_REQUEST:`${URL}/upload-request`,};constdefaultOptions={url:ENDPOINTS.UPLOAD,startingByte:0,fileId:"",onAbort(){},onProgress(){},onError(){},onComplete(){},};constfileRequests=newWeakMap();constuploadFile=(file,options)=>{};constabortFileUpload=(file)=>{};constretryFileUpload=(file)=>{};constclearFileUpload=(file)=>{};constresumeFileUpload=(file)=>{};constuploadFileChunks=(file,options)=>{};constuploadFile=(file,options)=>{returnfetch(ENDPOINTS.UPLOAD_REQUEST,{method:"POST",headers:{"Content-Type":"application/json",},body:JSON.stringify({fileName:file.name,}),}).then((res)=>res.json()).then((res)=>{options={...options,...res};fileRequests.set(file,{request:null,options});uploadFileChunks(file,options);}).catch((e)=>{options.onError({...e,file});});};return(files,options=defaultOptions)=>{[...files].forEach((file)=>{uploadFile(file,{...defaultOptions,...options});});return{abortFileUpload,retryFileUpload,clearFileUpload,resumeFileUpload,};};})();一旦服务器用文件 id 进行响应，它就会更新函数，并使用请求选项创建一个文件请求空记录，以备后续重试。一旦这些都设置好了，它就会调用带有文件和更新选项的uploadFileChunks，这些选项将实际处理上传。
在这里，首先初始化表单数据和请求，然后从起始字节点开始对文件进行切片。
文件是一个 Blob 类型，它让用 TypedArray 来切片文件字节，这就是如何跟踪从哪一点开始上传文件服务器会负责把文件一块一块地放在一起。
constuploadFileChunks=(file,options)=>{constformData=newFormData();constreq=newXMLHttpRequest();constchunk=file.slice(options.startingByte);formData.append("chunk",chunk,file.name);formData.append("fileId",options.fileId);req.open("POST",options.url,true);req.setRequestHeader("Content-Range",`bytes=${options.startingByte}-${options.startingByte+chunk.size}/${file.size}`);req.setRequestHeader("X-File-Id",options.fileId);req.onload=(e)=>{//当请求状态不是200时被调用//这将只把200视为成功，其他的都是失败if(req.status===200){options.onComplete(e,file);}else{options.onError(e,file);}};req.upload.onprogress=(e)=>{constloaded=options.startingByte+e.loaded;options.onProgress({...e,loaded,total:file.size,percentage:(loaded*100)/file.size,},file);};req.ontimeout=(e)=>options.onError(e,file);req.onabort=(e)=>options.onAbort(e,file);req.onerror=(e)=>options.onError(e,file);fileRequests.get(file).request=req;req.send(formData);};然后，通过提供块的名称（即文件名）和文件id与服务器通信，并通过在将要发送的表单数据中设置这些属性。
当使用 XMLHttpRequest 时，需要打开一个请求，在这里发起一个POST请求，设置一些头信息。
Content-Range ：这是与服务器通信的方式发送的文件字节的范围。该信息对服务器很重要，以便知道如何将文件放回一起并验证请求。
X-File-Id：传递文件id 的另一种方式。
一旦设置好请求，就用传递事件和文件Blob的选项回调来映射上传进度事件。
一旦上传完成，就会触发 load 事件。
当请求接收到更多数据时，就会触发 progress 事件，从那里可以提取到目前为止上传的总字节数，并计算上传进度百分比。
timeout 和 error 将被视为失败;
当触发中止以暂停上传时，中止 将被触发。
接下来要做的就是使用 WeakMap 中的实际请求更新文件请求并发送表单数据。
文件恢复上传逻辑
恢复上传的逻辑要简单得多，这里，所要做的就是使用提供的文件从 WeakMap 中获取文件请求，并将文件id和名称作为查询参数传递到服务器上查询该文件的上传状态。
有了状态（之前上传的总字节）后，调用 uploadFileChunks 函数，提供开始上传的字节。
constresumeFileUpload=(file)=>{constfileReq=fileRequests.get(file);if(fileReq){returnfetch(`${ENDPOINTS.UPLOAD_STATUS}?fileName=${file.name}&fileId=${fileReq.options.fileId}`).then((res)=>res.json()).then((res)=>{uploadFileChunks(file,{...fileReq.options,startingByte:Number(res.totalChunkUploaded),});}).catch((e)=>{fileReq.options.onError({...e,file});});}};文件重试上传逻辑
文件上传过程中可能会出错，也许网络失去了连接，服务器崩溃了等等。
其逻辑与恢复上传逻辑几乎相同，唯一的区别是在 catch 块上，重新启动上传，以防文件从未开始上传，并且服务器不知道它。
constretryFileUpload=(file)=>{constfileReq=fileRequests.get(file);if(fileReq){//trytogetthestatusjustincaseitfailedmiduploadreturnfetch(`${ENDPOINTS.UPLOAD_STATUS}?fileName=${file.name}&fileId=${fileReq.options.fileId}`).then((res)=>res.json()).then((res)=>{//ifuploadedwecontinueuploadFileChunks(file,{...fileReq.options,startingByte:Number(res.totalChunkUploaded),});}).catch(()=>{//ifneveruploadedwestartuploadFileChunks(file,fileReq.options);});}};文件暂停上传逻辑
要暂停当前上传的文件，需要中止请求。除了抓取文件上传进度，中止请求的能力是使用 XMLHttpRequest 的第二个原因。
当使用文件调用这个函数时，从 WeakMap 中获取请求，并使用请求调用 abort 函数来停止上传。
constelemFileInput=document.getElementById("file-upload-input");elemFileInput.addEventListener("change",(e)=>{//handlefilehere});0这将简单地停止向服务器发送块，然后可以通过调用 resumeFileUpload 函数继续上传。
文件清除逻辑
在上传完成时或之后清除或取消上传，它只会中止请求并清除它，执行清除操作后将无法继续恢复上传。
constelemFileInput=document.getElementById("file-upload-input");elemFileInput.addEventListener("change",(e)=>{//handlefilehere});1上传进度
在 uploadAndTrackFiles 函数，可以定义进度框的内部HTML，它将显示当前有多少文件正在上传，并提供一个上传进度恢复表，告诉有多少文件失败了、成功了、暂停了等等。
还有一个最大化按钮，当点击将展开或折叠上传程序。紧接着，有一个总的文件上传进度条和一个容器，将放置每个文件指示元素和单独的状态和控件。
constelemFileInput=document.getElementById("file-upload-input");elemFileInput.addEventListener("change",(e)=>{//handlefilehere});2一旦接收到文件Blobs，就可以使用它来创建文件元素，方法是调用 setFileElement，它创建一个包含文件名、进度条、百分比以及用于处理文件上传的控制按钮的div。
还需要跟踪各个文件元素，以便稍后可以使用文件Blob引用它们。需要跟踪它的大小、状态、百分比和上传的块大小。所有这些细节将用于呈现元素进度细节并相应地更新视图。
constelemFileInput=document.getElementById("file-upload-input");elemFileInput.addEventListener("change",(e)=>{//handlefilehere});3一旦使用了这些元素，就获取了它的控制按钮的引用，并附加了从上传器调用公开方法的单击事件，以控制传递文件的内容。
当清除元素时，需要通过调用 updateProgressBox 函数来更新进度框元素。这是更新所有上传文件的整体细节的函数。比如所有失败、成功、暂停和上传文件。
constelemFileInput=document.getElementById("file-upload-input");elemFileInput.addEventListener("change",(e)=>{//handlefilehere});4还需要根据文件上传进度事件更新各个文件元素，它只是更新进度条百分比和状态文本消息，并根据文件上传状态切换可见或不可见的按钮。
constelemFileInput=document.getElementById("file-upload-input");elemFileInput.addEventListener("change",(e)=>{//handlefilehere});5现在有了基于上传事件更新元素的函数，需要相应地处理所有文件上传事件。
因此，每当进程事件调用 onProgress 回调函数时，将使用该文件从 setFileElement 函数中设置的文件中获取渲染的文件对象，并使用事件细节更新其状态、百分比和块大小，然后调用 updateFileElement 函数。
constelemFileInput=document.getElementById("file-upload-input");elemFileInput.addEventListener("change",(e)=>{//handlefilehere});6当上传完成时，对文件对象做几乎相同的事情并再次调用 updateFileElement 函数。
constelemFileInput=document.getElementById("file-upload-input");elemFileInput.addEventListener("change",(e)=>{//handlefilehere});7对于中止事件，状态更新为“暂停”，更新文件元素。
constelemFileInput=document.getElementById("file-upload-input");elemFileInput.addEventListener("change",(e)=>{//handlefilehere});8最后，如果出现问题，将百分比设置为100，这样进度条就会完整呈现，并将状态设置为失败，这样进度条就会变成红色。
constelemFileInput=document.getElementById("file-upload-input");elemFileInput.addEventListener("change",(e)=>{//handlefilehere});9到这里就完成了客户端文件上传模块的所有逻辑。
服务端
这是一个简单全栈项目，将需要服务端来处理上传请求，需要在项目目录中创建一个server.js 文件，代码如下：
constuploadFiles=(()=>{constURL=`http://localhost:3008/`;constENDPOINTS={UPLOAD:`${URL}upload`,UPLOAD_STATUS:`${URL}/upload-status`,UPLOAD_REQUEST:`${URL}/upload-request`,};constdefaultOptions={url:ENDPOINTS.UPLOAD,startingByte:0,fileId:"",onAbort(){},onProgress(){},onError(){},onComplete(){},};return(files,options=defaultOptions)=>{//handlefileobjectshere};})();0这是一个非常简单的服务器，仅用于处理上传，不提供应用程序网站文件。
端点预先设置
要设置端点，需要做的事情很少，将首先安装该cors模块，以便可以允许来自不同域的请求顺利通过。接下来是允许请求通过添加 express.json 中间件来处理 JSON 请求体。
constuploadFiles=(()=>{constURL=`http://localhost:3008/`;constENDPOINTS={UPLOAD:`${URL}upload`,UPLOAD_STATUS:`${URL}/upload-status`,UPLOAD_REQUEST:`${URL}/upload-request`,};constdefaultOptions={url:ENDPOINTS.UPLOAD,startingByte:0,fileId:"",onAbort(){},onProgress(){},onError(){},onComplete(){},};return(files,options=defaultOptions)=>{//handlefileobjectshere};})();1由于服务端涉及文件处理，需要导入 fs 模块，还需要增加创建唯一ID生成器的函数。还将把文件放在上传目录中，所以需要一个实用程序函数来组合该文件路径与 id 和文件名。
constuploadFiles=(()=>{constURL=`http://localhost:3008/`;constENDPOINTS={UPLOAD:`${URL}upload`,UPLOAD_STATUS:`${URL}/upload-status`,UPLOAD_REQUEST:`${URL}/upload-request`,};constdefaultOptions={url:ENDPOINTS.UPLOAD,startingByte:0,fileId:"",onAbort(){},onProgress(){},onError(){},onComplete(){},};return(files,options=defaultOptions)=>{//handlefileobjectshere};})();2上传请求端点
上传请求端点非常简单，它需要文件名，如果没有提供它应该抛出一个错误。当有文件名时，生成一个 id 并使用 id 和 name 创建一个空文件，然后用文件 id 响应。
constuploadFiles=(()=>{constURL=`http://localhost:3008/`;constENDPOINTS={UPLOAD:`${URL}upload`,UPLOAD_STATUS:`${URL}/upload-status`,UPLOAD_REQUEST:`${URL}/upload-request`,};constdefaultOptions={url:ENDPOINTS.UPLOAD,startingByte:0,fileId:"",onAbort(){},onProgress(){},onError(){},onComplete(){},};return(files,options=defaultOptions)=>{//handlefileobjectshere};})();3上传状态端点
上传状态也很简单，第一个设置是承诺 fs.stat 方法以使其更易于使用。查询文件并获取其状态以读取到目前为止上传的块的总大小并返回它，否则，以 400 状态和错误响应。
constuploadFiles=(()=>{constURL=`http://localhost:3008/`;constENDPOINTS={UPLOAD:`${URL}upload`,UPLOAD_STATUS:`${URL}/upload-status`,UPLOAD_REQUEST:`${URL}/upload-request`,};constdefaultOptions={url:ENDPOINTS.UPLOAD,startingByte:0,fileId:"",onAbort(){},onProgress(){},onError(){},onComplete(){},};return(files,options=defaultOptions)=>{//handlefileobjectshere};})();4上传端点
要处理文件块，需要安装 busboy 模块
constuploadFiles=(()=>{constURL=`http://localhost:3008/`;constENDPOINTS={UPLOAD:`${URL}upload`,UPLOAD_STATUS:`${URL}/upload-status`,UPLOAD_REQUEST:`${URL}/upload-request`,};constdefaultOptions={url:ENDPOINTS.UPLOAD,startingByte:0,fileId:"",onAbort(){},onProgress(){},onError(){},onComplete(){},};return(files,options=defaultOptions)=>{//handlefileobjectshere};})();5对于这个处理程序的前半部分，只需要通过验证文件 id 和内容范围的请求标头来确保拥有继续所需的一切。
constuploadFiles=(()=>{constURL=`http://localhost:3008/`;constENDPOINTS={UPLOAD:`${URL}upload`,UPLOAD_STATUS:`${URL}/upload-status`,UPLOAD_REQUEST:`${URL}/upload-request`,};constdefaultOptions={url:ENDPOINTS.UPLOAD,startingByte:0,fileId:"",onAbort(){},onProgress(){},onError(){},onComplete(){},};return(files,options=defaultOptions)=>{//handlefileobjectshere};})();6busboy 模块获取请求头，可以将请求通过管道传递给它。在 busboy 文件事件中，确保字节从内存中的块开始，然后开始写块并把文件放在一起。
到此，服务器端的逻辑也基本完成，文章涉及的源代码在GitHub上，查看源代码。
更新记录
Version 1.0.0- 2021年10月07日
UI增加 pengding 状态
增加 svg 图标的预加载，未强制