技术栈
前端用了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启动服务。
代码地址
前端代码
后端代码
最后
如果理解了整个断点续传的原理,具体的代码编写就比较容易了,可以按照自己的项目需求定制。本文提供的代码只是基础实现,仅供大家参考。
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
RTX 5090要首发 性能要翻倍!三星展示GDDR7显存
三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。
首次推出的GDDR7内存模块密度为16GB,每个模块容量为2GB。其速度预设为32 Gbps(PAM3),但也可以降至28 Gbps,以提高产量和初始阶段的整体性能和成本效益。
据三星表示,GDDR7内存的能效将提高20%,同时工作电压仅为1.1V,低于标准的1.2V。通过采用更新的封装材料和优化的电路设计,使得在高速运行时的发热量降低,GDDR7的热阻比GDDR6降低了70%。
更新日志
- 2019明达发烧碟MasterSuperiorAudiophile[WAV+CUE]
- 蔡幸娟.1993-相爱容易相处难【飞碟】【WAV+CUE】
- 陆虎.2024-是否愿意成为我的全世界【Hikoon】【FLAC分轨】
- 关淑怡.2009-ERA【星娱乐】【WAV+CUE】
- 林忆莲《关于她的爱情故事》2022新世纪MQA 24K金碟限量版[WAV+CUE]
- 张雨生1993《一天到晚游泳的鱼》台湾G字首版[WAV+CUE][1G]
- 群星《试音五大女声》[WAV+CUE][1G]
- 魔兽世界wlk武器战一键输出宏是什么 wlk武器战一键输出宏介绍
- 魔兽世界wlk狂暴战一键输出宏是什么 wlk狂暴战一键输出宏介绍
- 魔兽世界wlk恶魔术士一键输出宏是什么 wlk恶魔术士一键输出宏介绍
- 医学爱好者狂喜:UP主把医学史做成了格斗游戏!
- PS5 Pro评分解禁!准备升级入手吗?
- 我们盘点了近期火热的国产单机游戏!《琉隐神渡》等 你期待哪款?
- 2019年第12届广州影音展双碟纪念版ADMS2CD[MP3/WAV]
- 黄安《救姻缘》台首版[WAV+CUE]