[TOC] > [参考](https://segmentfault.com/a/1190000022624799?utm_source=tuicool&utm_medium=referral) ## demo ``` git clone https://github.com/jiaozitang/fileUploadDemo cd fileUploadDemo mkdir -p nodeServer/uploads ``` ## 方案 ### 文件md5 通过 [spark-md5](https://www.npmjs.com/package/spark-md5) 获取文件md5 ### 查询文件状态 - 前端得到文件的 MD5 后，从后台查询是否存在名称为 MD5 的文件夹 - 如果存在，列出文件夹下所有文件，得到已上传的切片列表 - 如果不存在，则已上传的切片列表为空。 ### 文件分片 - File 对象也有 slice 方法。 定义每一个分片文件的大小变量为 chunkSize，通过文件大小 FileSize 和分片大小 chunkSize 得到分片数量 chunks，使用 for 循环和 file.slice() 方法对文件进行分片，序号为 0 - n，和已上传的切片列表做比对，得到所有未上传的分片，push 到请求列表 requestList。 ### 上传分片 调用 Promise.all 并发上传所有的切片，将切片序号、切片文件、文件 MD5 传给后台。 后台接收到上传请求后，首先查看名称为文件 MD5 的文件夹是否存在，不存在则创建文件夹，然后通过 fs-extra 的 rename 方法，将切片从临时路径移动切片文件夹中 ### 上传进度 原生 Javascript 的 XMLHttpRequest 有提供 progress 事件，这个事件会返回文件已上传的大小和总大小。项目使用[**axios**](https://www.kancloud.cn/yunye/axios/234845)对 ajax 进行封装，可以在 config 中增加`onUploadProgress`方法，监听文件上传进度。 ### 合并分片 上传完所有文件分片后，前端主动通知服务端进行合并 在合并文件夹里的分片文件前，根据文件名进行排序，然后再通过 concat-files 合并分片文件，得到用户上传的文件。至此大文件上传就完成了。