用户这边是汽车行业的一家公司,现在有个需求,需要在网页里面传一个50G左右的文件,文件是汽车的设计图纸,比较大。还有一些高清的音视频文件也要传。

需要支持分片上传,分块上传,分割上传,断点续传。因为文件比较大,之前在HTML里面试过一次性上传不行,浏览器崩溃了。改用HTML5也不太行,关闭浏览器或者刷新页面后进度信息就丢失了。用户传一半,可能要下班了,需要明天继续传。

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

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

客户那边是政府单位,所以要求提供技术支持服务,数据库用了MySQL,达梦,要求提供前端,后端,控件源代码,需要提供手机,QQ,微信,邮箱等联系方式,需要提供7*24小时技术支持服务,需要提供文档教程,视频教程,远程技术指导。

1.下载示例

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

VUE-超大文件上传-如何上传文件-大文件上传_vue大文件上传

 

 

将up6组件复制到项目中

示例中已经包含此目录

VUE-超大文件上传-如何上传文件-大文件上传_vue断点续传_02

 

 

1.引入up6组件

VUE-超大文件上传-如何上传文件-大文件上传_vue分片上传_03

 

 

2.配置接口地址

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

VUE-超大文件上传-如何上传文件-大文件上传_vue断点续传_04

 

 

3.处理事件

VUE-超大文件上传-如何上传文件-大文件上传_vue断点续传_05

 

 

启动测试

VUE-超大文件上传-如何上传文件-大文件上传_vue断点续传_06

 

 

启动成功

VUE-超大文件上传-如何上传文件-大文件上传_vue断点续传_07

 

 

效果

VUE-超大文件上传-如何上传文件-大文件上传_vue断点续传_08

 

 

数据库

VUE-超大文件上传-如何上传文件-大文件上传_vue断点续传_09