实现大文件的快速上传
大文件的上传,无非是将文件变小即文件资源压缩或文件资源分块上传
文件资源分块上传的实现(前端部分的实现)
1.创建项目-对应目录如图
2.请求模块
src/request.js
对axios进行封装
3.将资源进行分块
根据 DefualtChunkSize = 5 * 1024 * 1024 ,即 5 MB ,来对文件进行资源分块进行计算,通过 spark-md5[1] 根据文件内容计算出文件的 hash 值,方便做其他优化,比如:当 hash 值不变时,服务端没有必要重复读写文件等.
4.发送上传请求与合并请求
通过Promise.all整合所有的分块请求,在所有的分块资源上传完毕后,在then中发送合并请求
到这,前端的工作就大概算是完成了,服务器要根据前端所传的分块的资源和合并请求的顺序将分块的资源进行整合
!!!!!这里我们还要考虑到的一个问题是如果在文件上传的过程中某一分块的资源上传时出现问题导致上传失败时,如何做?
一旦服务端某个上传请求失败,会返回当前分块失败的信息,其中会包含文件名称、文件 hash、分块大小以及分块序号等,前端拿到这些信息后可以进行重传,同时考虑此时是否需要将 Promise.all 替换为 Promise.allSettled 更方便.
1.服务器通过ko2进行服务搭建,
2.使用 koa-body 处理接收前端传递 Content-Type: multipart/form-data 类型的数据
3.使用 koa-router 注册服务端路由
4.使用 koa2-cors 处理跨域问题
上一篇:
IDEA上Java项目控制台中文乱码