JS大文件分片上传/多线程上传

最新推荐文章于 2024-08-20 15:46:47 发布

M_Snow

最新推荐文章于 2024-08-20 15:46:47 发布

阅读量544

点赞数 13

文章标签： javascript 开发语言前端

本文链接：https://blog.csdn.net/weixin_45525177/article/details/139496767

版权

JS大文件分片上传/多线程上传，JS大文件分片上传，JS大文件分块上传，JS大文件切片上传，JS大文件分片上传解决方案，JS大文件分片上传实现方法，JS大文件分片上传实例，JS大文件分片上传源码，JS大文件分片上传思路，JS大文件加密上传，

用户上传的文件比较大，有10G左右，直接用HTML传的话容易失败，服务器也容易出错，需要分片，分块，分割上传。也就是将一个大的文件分成若干个小文件块来上传，另外就是需要实现秒传功能和防重复功能，秒传就是用户如果上传过这个文件，那么直接在数据库中查找记录就行了，不用再上传一次，节省时间，实现的思路是对文件做MD5计算，将MD5值保存到数据库，算法可以用MD5，或者CRC，或者SHA1，这个随便哪个算法都行。

分片还需要支持断点续传，现在HTML5虽然提供了信息记录功能，但是只支持到了会话级，也就是用户不能关闭浏览器，也不能清空缓存。但是有的政府单位上传大文件，传了一半下班了，明天继续传，电脑一关结果进度信息就丢失了，这个是他们的一个痛点。

切片的话还有一点就是在服务器上合并，一个文件的所有分片数据上传完后需要在服务器端进行合并操作。

该项目核心就是文件分块上传。前后端要高度配合，需要双方约定好一些数据，才能完成大文件分块，我们在项目中要重点解决的以下问题。

* 如何分片；

* 如何合成一个文件；

* 中断了从哪个分片开始。

如何分，利用强大的js库，来减轻我们的工作，市场上已经能有关于大文件分块的轮子，虽然程序员的天性曾迫使我重新造轮子。但是因为时间的关系还有工作的关系，我只能罢休了。最后我选择了百度的WebUploader来实现前端所需。

如何合，在合之前，我们还得先解决一个问题，我们如何区分分块所属那个文件的。刚开始的时候，我是采用了前端生成了唯一uuid来做文件的标志，在每个分片请求上带上。不过后来在做秒传的时候我放弃了，采用了Md5来维护分块和文件关系。

在服务端合并文件，和记录分块的问题，在这方面其实行业已经给了很好的解决方案了。参考迅雷，你会发现，每次下载中的时候，都会有两个文件，一个文件主体，另外一个就是文件临时文件，临时文件存储着每个分块对应字节位的状态。

这些都是需要前后端密切联系才能做好，前端需要根据固定大小对文件进行分片，并且请求中要带上分片序号和大小。前端发送请求顺利到达后台后，服务器只需要按照请求数据中给的分片序号和每片分块大小（分片大小是固定且一样的）算出开始位置，与读取到的文件片段数据，写入文件即可。

为了便于开发，我将服务端的业务逻辑进行了如下划分，分成初始化，块处理，文件上传完毕等。

1.下载示例