详解vue大文件视频切片上传的处理方法

最新推荐文章于 2024-06-12 11:13:48 发布

M_Snow

最新推荐文章于 2024-06-12 11:13:48 发布

阅读量881

点赞数 18

文章标签：前端 javascript vue

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

版权

详解vue大文件视频切片上传的处理方法，vue大文件视频切片上传的处理方法，vue大文件视频切片上传，vue大文件切片上传，vue大文件分片上传，vue大文件分块上传，vue大文件加密上传，vue大文件批量上传，vue文件夹上传，vue大文件切片上传解决方案，

我们公司最近有一个项目，要做一个业务管理系统，主要就是管理一些项目文件，经常要上传下载文件，

前端用了VUE2,VUE3,JQ，后端用了JAVA,JSP,SpringBoot，要求在前端提供大文件上传的功能，文件大小约为10G左右，可能偶尔有文件会超过这个大小，但是不多，

网上搜了一圈，基本上都是用的HTML5实现的，也就是chrome提供的API，小文件还好，比如几十MB，500MB左右的话，单个文件上传还凑合，但是文件大点，文件一多就不行了。比如1G以上，或者10G以上，100个文件，1000个文件同时传，就有点不行了，主要就是页面反应慢，卡顿。

我们之前用过WebUploader，上传小一点的文件还不错，但是大点的文件就不行了，比如上传5G的文件，上传经常会自动中断，不太稳定。

浏览器要求支持包含IE在内的所有浏览器，系统环境要求支持信创国产化，比如银河麒麟，统信，龙芯，

我们的要求就是上传大文件不能出现无缘无故中断的现象，要支持断点续传，上传速度不能太慢，上传的数据不出错，基本就是这些了。

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

* 如何分片；

* 如何合成一个文件；

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

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

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

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

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

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

1.下载示例

https://gitee.com/xproer/up6-vue-cli

将up6组件复制到项目中

示例中已经包含此目录

1.引入up6组件

2.配置接口地址

接口地址分别对应：文件初始化，文件数据上传，文件进度，文件上传完毕，文件删除，文件夹初始化，文件夹删除，文件列表

参考：http://www.ncmem.com/doc/view.aspx?id=e1f49f3e1d4742e19135e00bd41fa3de

3.处理事件

启动测试

启动成功

效果

数据库

产品源代码：up6-code.zip
授权码生成器：up6-lic-app.zip

关注