大文件上传｜ React + NestJs ｜分片、断点续传、秒传 , 你是否知道 点击关注公众号，“技术干货”及时达！ 前言大文件上传不能一次性将整个大文件直接上传，因为这可能会导致 内存占用过高、网络传输不稳定等问题所以通常的做法是把大文件分割成一个个小块，分别上传这些小块，最后在服务器端将这些小块合并成完整的文件。 同时，为了支持秒传和断点续传功能，还需要对文件进行哈希计算，通过哈希值来判断文件是否已经上传过，以及哪些小块已经上传。 「项目地址」: 大文件上传 demo[1] 前端 vue 和 react 均实现 , 后端 Nest 实现 , 代码可以运行 , 点个赞吧~ 「前端效果如图:」 「后端效果如图：」 文件上传 , 之后 , 我保存到 uploads 文件夹下 : 大文件上传流程和倔友一样 , 文字太多 , 很有压力 ，于是乎画了一张图?? , 「不知可否点个赞」 ~ 「外层数字序号是上图解析 ， 内层序号是实现细节 ， 可先看外层数字序号」 前端选择文件后，计算文件哈希值并分割文件（「文件分片」）antd 提供的 Upload.Dragger 实现拖拽区域SparkMD5 计算哈希值file.slice 方法分割文件前端发送请求到后端检查文件上传状态前端 axios 向后端提供的接口发送请求后端接口返回 uploaded 、uploading 两种状态 (未上传是默认状态)前端根据后端返回的状态决策返回 uploading ，上传还未上传的文件块 ， 即「断点续传」返回 uploaded , 文件已经上传 ， 告诉用户已经上传 ， 即「秒传」默认未上传 ， 则执行上传文件操作步骤 3 中 第 1,3 点 ，所有文件块上传完成后，前端发送请求通知后端合并文件块。后端将文件块合并成完整的文件 ， 并先前端响应成功信息通过上述这种方式，前端和后端相互配合，实现了大文件的上传、秒传和断点续传功能。 接下来 ， 具体看看代码如何实现 ~ 代码实现「前端使用 React + TS」 「axios」: 基于 promise 向后端发送 HTTP 请求「spark-md5」 : 使用哈希算法计算文件的哈希值「antd」: 引入上传文件的组件「TypeScript」 : 增强代码健壮性「后端使用 NestJs + TS」 「NestJS」：一个用于构建高效、可靠和可扩展的服务器端应用程序的渐进式 Node.js 框架。「Multer」：用于处理 multipart/form-data 的中间件，主要用于上传文件。「TypeScript」：NestJs 支持 TS「Node.js 文件系统 (fs) 模块」：用于与文件系统交互，如读取、写入和删除文件和目录。初次之外是一些语法检查工具 ESlint 导库代码总体结构如下 ： UI首先写 App 函数 , 实现利用 Upload.Dragger 实现上传 UI 添加处理函数 handChange , 若文件有效 , 进入 handFileUpload 函数中 , 进行 文件分片 , MD5 哈希值计算检查文件上传状态 , 与后端不断交互哈希计算与分片在 handFileUpload 中 , 实现文件分片 , MD5 哈希值计算 计算 MD5 哈希值我们封装的函数如下 : 使用 Spark-md5 库 文件上传状态分流handFileUpload 计算哈希值 和 实现文件分片后 , 首先检查文件上传情况 , 向后端发一个请求 , 发送 hash 和 文件名 以及文件块的长度 后端通过 Query 从 params 中获取这三个字段 通过检查 uploads 目录下 , 是否有完整文件或文档块来决定返回'uploaded'(秒传) 还是'uploading'(断点续传) 之后根据这些状态 , 选择合适的处理方法 如果是秒传 , 直接告诉用户成功 ; 未上传状态和部分上传状态 , 会进入下面的代码 , 请求后端:http://localhost:3000/upload[2] 接口 , 在后端创建文件夹 , 并且保存分块 分块合并最后继续执行前端下面的逻辑 , 请求后端将分块合并 后端的实现如下 : 如此大文件上传流程走完 ~ 总结把上面这张图拿下来 , : 面试官 : 请说说大文件上传 ? 你 : 掏出掘金看完这篇文章 , 开始你的表演 ~ 优化点前端切片 为了使得主线程不卡顿 , 使用 web-work 多线程切片 , 处理往后在交给主线程一文彻底学会使用 web worker 众所周知，Javascript 最初设计是运行在浏览器中的，为了防止多个线程同时操作 D - 掘金 (juejin.cn)[3]切片后 , 如果用户突然关掉浏览器 , 可以将 blob(二进制大对象) , 储存到 IndexedDB , 下次用户近来时候 , 嗅探一下是否存在未完成的切片 使用 websocket 双向通信 , 实时通知 和请求序列控制 ...... 下次 , 在来 , 关注我 , 点个赞 , 我酱油更大的动力 , 用心写文章 ! 点击关注公众号，“技术干货”及时达！ 阅读原文