React+EggJs实现断点续传的示例代码


Posted in Javascript onJuly 07, 2020

技术栈

前端用了React,后端则是EggJs,都用了TypeScript编写。

断点续传实现原理

断点续传就是在上传一个文件的时候可以暂停掉上传中的文件,然后恢复上传时不需要重新上传整个文件。

该功能实现流程是先把上传的文件进行切割,然后把切割之后的文件块发送到服务端,发送完毕之后通知服务端组合文件块。

其中暂停上传功能就是前端取消掉文件块的上传请求,恢复上传则是把未上传的文件块重新上传。需要前后端配合完成。

前端实现

前端主要分为:切割文件、获取文件MD5值、上传切割后的文件块、合并文件、暂停和恢复上传等功能。

切割文件:这个功能点在整个断点续传中属于比较重要的一环,这里仔细说明下。我们用ajax上传一个大文件用的时间会比较长,在上传途中如果取消掉请求,那在下一次上传时又要重新上传整个文件。而通过把大文件分解成若干个文件块去上传,这样在上传中取消请求,已经上传的文件块会保存到服务端,下一次上传就只需要上传其他没上传成功的文件块(不用传整个文件)。

这里把文件块放入一个fileChunkList数组,方便后面去获取文件的MD5值、上传文件块等。

// 使用HTML5的file.slice对文件进行切割,file.slice方法返回Blob对象
let start = 0;
while (start < file.size) {
    fileChunkList.push({ file: file.slice(start, start + CHUNK_SIZE) });
    start += CHUNK_SIZE;
}

获取文件MD5值:我们不能通过文件名来判断服务端是否存在上传的文件,因为用户上传的文件很可能会有重名的情况。所以应该通过文件内容来区分,这样就需要获取文件的MD5值。

使用spark-md5模块获取文件的MD5值。模块详情点击这里

// 部分代码展示
let spark = new SparkMD5.ArrayBuffer();
let fileReader = new FileReader();
fileReader.onload = e => {
    if (e.target && e.target.result) {
        count++;
        spark.append(e.target.result as ArrayBuffer);
    }
    if (count < totalCount) {
        loadNext();
    } else {
        resolve(spark.end());
    }
};
function loadNext() {
    fileReader.readAsArrayBuffer(fileChunkList[count].file);
}
loadNext();

上传切割后的文件块:根据前面的fileChunkList数组,使用FormData上传文件块。

// 部分代码展示
Axios.post(uploadChunkPath, formData, {
    headers: { 'Content-Type': 'multipart/form-data' },
    cancelToken: source.token,
}).then(()=>{
    // ...
})

合并文件:就是等所有文件块上传成功后发送ajax通知服务端,让服务端把文件块进行合并。

// 部分代码展示
Axios.get(mergeChunkPath, {
    params: {
        fileHash: targetFile,
        fileName,
    },
})

暂停功能:把上传文件块的请求放到一个数组里,请求完成的则从数组中删除;点击暂停的时候把数组里所有的请求暂停。

/* 文件块请求放入数组 */
const source = CancelToken.source();
// ...
axiosList.push(source);

/* 暂停请求 */
axiosList.forEach((item) => item.cancel('abort'));
axiosList.length = 0;
message.error('上传暂停');

恢复上传:去服务端查询已经上传的文件块有哪些,然后上传没有上传成功的文件块。

// 部分代码展示
let uploadedFileInfo = await getFileChunks(this.fileName, this.fileMd5Value);
if (this.handleUploaded(uploadedFileInfo.fileExist) && uploadedFileInfo.chunkList) {
    this.uploadChunks(this.chunkListInfo, uploadedFileInfo.chunkList, this.fileName);
}

后端实现

后端主要的工作是针对文件的操作,比如使用fs-extra模块获取文件信息、使用formidable模块解析上传的文件等。

大致编写过程:在egg项目中的app目录里面找到router.ts文件定义路由,定义路由需要传入controller方法。所以我们接着编写controller方法,而该方法主要对请求参数进行处理,调用service方法处理业务,然后返回结果。主要是router、controller、service三个部分。

环境搭建

egg文档蛮全的,可以直接参考egg的文档。这里就简单说下搭建步骤。egg文档

首先执行npm init egg --type=ts安装egg项目,然后找到router.ts文件定义一些路由,比如处理上传的接口router.post('api/uploadChunk', controller.file.upload);接着分别在controller目录跟service目录下创建对应文件,比如cd app/controller/ && touch file.ts;最后在对应的文件编写具体业务。

接口编写

主要有三个接口,分别是checkChunk、uploadChunk接口和mergeChunk接口。

checkChunk接口:首先判断上传的文件是否存在,如果存在则告诉前端文件已经上传成功。文件不存在则再查看存放文件块的目录是否存在,目录存在则把上传成功的文件块列表返回给前端。目录不存在则把空列表返回给前端。

if (fileInfo.isFileExist) {
 checkResponse.fileExist = true;
} else {
 const fileList = await ctx.service.file.getFileList(fileMd5Val);
 checkResponse.chunkList = fileList;
 checkResponse.fileExist = false;
}
ctx.body = checkResponse;

uploadChunk接口:使用formidable模块解析上传的文件块,把上传的文件块统一放到一个目录,用文件的MD5值给目录命名。

import { IncomingForm } from 'formidable';
const form = new IncomingForm();
form.parse(req, async (err, fields, file) => {
  if (err) return err;
  const md5AndFileNo = fields.md5AndFileNo;
  const fileHash = fields.fileHash;
  const chunkFolder = resolve(this.config.uploadsPath, fileHash as string);
  if (!existsSync(chunkFolder)) {
    await mkdirs(chunkFolder);
  }
  move(file.chunk.path, resolve(`${chunkFolder}/${md5AndFileNo}`));
});

mergeChunk接口:通过文件MD5值,把对应目录里面的文件块用createReadStream跟createWriteStream组合成一个文件。最后在文件组合完成之后删除文件块目录。

const readStream = createReadStream(path);
readStream.on('end', () => {
 unlinkSync(path);
 resolve();
});
readStream.pipe(writeStream);

单元测试

测试文件都放在test目录里,同时必须用.test.ts结尾。

编写案例:首先创建测试文件cd test/app/controller && touch file.test.ts,然后在file.test.ts里编写测试代码,最后执行npm run test-local运行测试案例。

使用app.httpRequest()可以发送HTTP请求,然后传入参数,验证返回值是否跟预期相等。

describe('api/checkChunk', () => {
  // 文件不存在的情况
  it('should GET / file nonExist', async () => {
    const testHash = 'e62d28dd31fc4d1e92a81e7ae5be3cc6';
    const result = await app.httpRequest()
      .get('/api/checkChunk')
      .query({ fileName: '归档 2.zip', fileMd5Val: testHash })
      .expect(200);
    assert.deepEqual(result.body, { hash: testHash, fileExist: false, chunkList: [] });
  });
});

运行

使用npm i安装依赖,本地环境启动使用npm run dev即可。生产环境则先把ts编译成js,执行npm run tsc,然后执行npm run start启动服务。

代码地址

前端代码 
后端代码

最后
如果理解了整个断点续传的原理,具体的代码编写就比较容易了,可以按照自己的项目需求定制。本文提供的代码只是基础实现,仅供大家参考。

到此这篇关于React+EggJs实现断点续传的示例代码的文章就介绍到这了,更多相关React EggJs 断点续传内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木! 

Javascript 相关文章推荐
JQuery 拾色器插件发布-jquery.icolor.js
Oct 20 Javascript
基于jquery的多功能软键盘插件
Jul 25 Javascript
将查询条件的input、select清空
Jan 14 Javascript
jQuery中insertAfter()方法用法实例
Jan 08 Javascript
js实现带圆角的多级下拉菜单效果
Aug 28 Javascript
jQuery模拟完美实现经典FLASH导航动画效果【附demo源码下载】
Nov 09 Javascript
js实现tab选项卡切换功能
Jan 13 Javascript
详解Vue的computed(计算属性)使用实例之TodoList
Aug 07 Javascript
对Vue beforeRouteEnter 的next执行时机详解
Aug 25 Javascript
layui-laydate时间日历控件使用方法详解
Nov 15 Javascript
javascript实现移动端触屏拖拽功能
Jul 29 Javascript
three.js如何实现3D动态文字效果
Mar 03 Javascript
JS实现联想、自动补齐国家或地区名称的功能
Jul 07 #Javascript
jQuery 动态粒子效果示例代码
Jul 07 #jQuery
Electron实现应用打包、自动升级过程解析
Jul 07 #Javascript
基于Electron实现桌面应用开发代码实例
Jul 07 #Javascript
基于javascript处理nginx请求过程详解
Jul 07 #Javascript
vue-i18n实现中英文切换的方法
Jul 06 #Javascript
vue 实现动态路由的方法
Jul 06 #Javascript
You might like
PHP utf-8编码问题,utf8编码,数据库乱码,页面显示输出乱码
2013/04/08 PHP
js 复制或插入Html的实现方法小结
2010/05/19 Javascript
jQuery获取css z-index在各种浏览器中的返回值
2010/09/15 Javascript
淘宝搜索框效果实现分析
2011/03/05 Javascript
关于JavaScript中的关联数组分析
2013/04/09 Javascript
webapp框架AngularUI的demo改造之路
2014/12/21 Javascript
JS+CSS实现类似QQ好友及黑名单效果的树型菜单
2015/09/22 Javascript
javascript实现无缝上下滚动特效
2015/12/16 Javascript
js和jquery分别验证单选框、复选框、下拉框
2015/12/17 Javascript
基于jquery实现页面滚动到底自动加载数据的功能
2015/12/19 Javascript
内容滑动切换效果jquery.hwSlide.js插件封装
2016/07/07 Javascript
基于BootStrap环境写jQuery tabs插件
2016/07/12 Javascript
vue.js 实现图片本地预览 裁剪 压缩 上传功能
2018/03/01 Javascript
JS中数组与对象的遍历方法实例小结
2018/08/14 Javascript
jQuery实现的模仿雨滴下落动画效果
2018/12/11 jQuery
JS中数组实现代码(倒序遍历数组,数组连接字符串)
2019/12/29 Javascript
Python自动化测试Eclipse+Pydev 搭建开发环境
2016/08/15 Python
python 3.5下xadmin的使用及修复源码bug
2017/05/10 Python
有趣的python小程序分享
2017/12/05 Python
python如何为被装饰的函数保留元数据
2018/03/21 Python
python+Splinter实现12306抢票功能
2018/09/25 Python
浅析Python迭代器的高级用法
2020/07/16 Python
python中PyQuery库用法分享
2021/01/15 Python
CSS3只让背景图片旋转180度的实现示例
2021/03/09 HTML / CSS
浅析canvas元素的html尺寸和css尺寸对元素视觉的影响
2019/07/22 HTML / CSS
英国排名第一的礼品体验公司:Red Letter Days
2018/08/16 全球购物
就业推荐自我鉴定
2013/10/06 职场文书
暑期社会实践方案
2014/02/05 职场文书
新颖的化妆品活动方案
2014/08/21 职场文书
法制演讲稿
2014/09/10 职场文书
逃课检讨书怎么写
2015/01/01 职场文书
课外活动实习计划
2015/01/19 职场文书
学年个人总结范文
2015/03/05 职场文书
小学教师见习总结
2015/06/23 职场文书
Windows下使用Nginx+Tomcat做负载均衡的完整步骤
2021/03/31 Servers
JavaScript ES6的函数拓展
2022/01/18 Javascript