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 相关文章推荐
理清apply(),call()的区别和关系
Aug 14 Javascript
jquery聚焦文本框与扩展文本框聚焦方法
Oct 12 Javascript
jQuery操作表单常用控件方法小结
Mar 23 Javascript
javascript针对不确定函数的执行方法
Dec 16 Javascript
JavaScript检查子字符串是否在字符串中的方法
Feb 03 Javascript
jQuery实现指定区域外单击关闭指定层的方法【经典】
Jun 22 Javascript
jQuery validate 验证radio实例
Mar 01 Javascript
js/jq仿window文件夹框选操作插件
Mar 08 Javascript
Vue Spa切换页面时更改标题的实例代码
Jul 15 Javascript
jQuery实现图片简单轮播功能示例
Aug 13 jQuery
微信小程序实现获取用户信息并存入数据库操作示例
May 07 Javascript
如何使用gpu.js改善JavaScript的性能
Dec 01 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 Undefined index的问题
2009/06/01 PHP
PHP实现多进程并行操作的详解(可做守护进程)
2013/06/18 PHP
php第一次无法获取cookie问题处理
2014/12/15 PHP
php实现点击可刷新验证码
2015/11/07 PHP
CI(CodeIgniter)框架实现图片上传的方法
2017/03/24 PHP
基于jQuery的试卷自动排版系统实现代码
2011/01/06 Javascript
JavaScript实现页面实时显示当前时间的简单实例
2013/07/20 Javascript
Hallo.js基于jQuery UI所见即所得的Web编辑器
2016/01/26 Javascript
基于jquery编写分页插件
2016/03/07 Javascript
javascript中闭包概念与用法深入理解
2016/12/15 Javascript
js前端实现图片懒加载(lazyload)的两种方式
2017/04/24 Javascript
AngularJS 限定$scope的范围实例详解
2017/06/23 Javascript
基于vue.js快速搭建图书管理平台
2017/10/29 Javascript
JS原生带缩略图的图片切换效果
2018/10/10 Javascript
JavaScript文本特效实例小结【3个示例】
2018/12/22 Javascript
浅析vue中的nextTick
2020/12/28 Vue.js
简单介绍Python中的floor()方法
2015/05/15 Python
python验证码识别教程之灰度处理、二值化、降噪与tesserocr识别
2018/06/04 Python
用Python将一个列表分割成小列表的实例讲解
2018/07/02 Python
python3 读取Excel表格中的数据
2018/10/16 Python
Python的iOS自动化打包实例代码
2018/11/22 Python
Python3.5基础之函数的定义与使用实例详解【参数、作用域、递归、重载等】
2019/04/26 Python
python3 requests库文件上传与下载实现详解
2019/08/22 Python
tensorflow使用range_input_producer多线程读取数据实例
2020/01/20 Python
Ubuntu16安装Python3.9的实现步骤
2020/12/15 Python
MAC Cosmetics巴西官方网站:M·A·C彩妆
2019/04/18 全球购物
如何用PHP实现邮件发送
2012/12/26 面试题
教师个人鉴定材料
2014/02/08 职场文书
工作决心书范文
2014/03/11 职场文书
无毒社区工作方案
2014/05/23 职场文书
经济贸易系毕业生求职信
2014/05/31 职场文书
小学生十佳少年事迹材料
2014/08/20 职场文书
2014年仓库工作总结
2014/11/20 职场文书
2015年信访工作总结
2015/04/07 职场文书
2016年入党心得体会范文
2016/01/23 职场文书
使用Pytorch训练two-head网络的操作
2021/05/28 Python