大文件上传| React + NestJs |分片、断点续传、秒传 , 你是否知道 ???
浪遏约 4 分钟点击关注公众号，“技术干货” 及时达！
前言
大文件上传不能一次性将整个大文件直接上传，因为这可能会导致
内存占用过高、 网络传输不稳定等问题
所以通常的做法是把大文件分割成一个个小块，分别上传这些小块，最后在服务器端将这些小块合并成完整的文件。
同时，为了支持秒传和断点续传功能，还需要对文件进行哈希计算，通过哈希值来判断文件是否已经上传过，以及哪些小块已经上传。
「项目地址」: 大文件上传 demo[1]
前端 vue 和 react 均实现 , 后端 Nest 实现 , 代码可以运行 , 点个赞吧~
「前端效果如图:」
「后端效果如图：」 文件上传 , 之后 , 我保存到 uploads 文件夹下 :
大文件上传流程
和倔友一样 , 文字太多 , 很有压力 ，于是乎画了一张图😀 , 「不知可否点个赞」 ~
「外层数字序号是上图解析 ， 内层序号是实现细节 ， 可先看外层数字序号」
前端选择文件后，计算文件哈希值并分割文件（「文件分片」）
antd 提供的 Upload.Dragger 实现拖拽区域 SparkMD5 计算哈希值 file.slice 方法分割文件
前端 axios 向后端提供的接口发送请求 后端接口返回 uploaded 、uploading 两种状态 (未上传是默认状态)
返回 uploading ，上传还未上传的文件块 ， 即「断点续传」 返回 uploaded , 文件已经上传 ， 告诉用户已经上传 ， 即「秒传」 默认未上传 ， 则执行上传文件操作
通过上述这种方式，前端和后端相互配合，实现了大文件的上传、秒传和断点续传功能。
接下来 ， 具体看看代码如何实现 ~
代码实现
「前端使用 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 双向通信 , 实时通知 和请求序列控制
......
下次 , 在来 , 关注我 , 点个赞 , 我酱油更大的动力 , 用心写文章 !
点击关注公众号，“技术干货” 及时达！