[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**](http://www.hmoore.net/yunye/axios/234845)對 ajax 進行封裝，可以在 config 中增加`onUploadProgress`方法，監聽文件上傳進度。 ### 合并分片 上傳完所有文件分片后，前端主動通知服務端進行合并 在合并文件夾里的分片文件前，根據文件名進行排序，然后再通過 concat-files 合并分片文件，得到用戶上傳的文件。至此大文件上傳就完成了。