网站首页 > 技术文章 正文
前端上传文件支持断点续传,前端上传文件夹支持断点续传。用HTML5,前端用了VUE2,VUE3,JQ,后端用了JAVA,JSP,SpringBoot,要求在前端提供大文件上传的功能,文件大小约为20G左右,可能偶尔有文件会超过这个大小,但是不多,
前端上传文件夹需要保留层级结构,文件夹层级结构信息保存到数据库
前端下载文件夹时同样需要保留层级结构。
网上搜了一圈,基本上都是用的HTML5实现的,也就是chrome提供的API,小文件还好,比如几十MB,500MB左右的话,单个文件上传还凑合,但是文件大点,文件一多就不行了。比如1G以上,或者10G以上,100个文件,1000个文件同时传,就有点不行了,主要就是页面反应慢,卡顿。
浏览器要求支持包含IE在内的所有浏览器,系统环境要求支持信创国产化,比如银河麒麟,统信,龙芯,
客户那边是政府单位,所以要求提供技术支持服务,数据库用了MySQL,达梦,要求提供前端,后端,控件源代码,需要提供手机,QQ,微信,邮箱等联系方式,需要提供7*24小时技术支持服务,需要提供文档教程,视频教程,远程技术指导。
1.下载示例
https://gitee.com/xproer/up6-vue-cli
将up6组件复制到项目中
示例中已经包含此目录
1.引入up6组件
2.配置接口地址
接口地址分别对应:文件初始化,文件数据上传,文件进度,文件上传完毕,文件删除,文件夹初始化,文件夹删除,文件列表
参考:http://www.ncmem.com/doc/view.aspx?id=e1f49f3e1d4742e19135e00bd41fa3de
3.处理事件
启动测试
启动成功
效果
数据库
- 上一篇: 前端JS实现字符串/图片/excel文件下载
- 下一篇: 前端常见下载处理方案 前端点击下载
猜你喜欢
- 2025-06-13 周均下载百万的TOP 12前端 Ponyfill !
- 2025-06-13 前端文件下载的N种姿势:从简单到高级
- 2024-10-03 JS 下载/导出 csv、excel、txt 、img等文件的方法总结
- 2024-10-03 入门 基础知识点:浏览器到底是如何下载资源的
- 2024-10-03 技术小白的微信小程序搭建之路(六:前端设置)
- 2024-10-03 springboot:实现文件上传下载实时进度条功能【附带源码】
- 2024-10-03 字节内部前端开发手册(完整版),开放下载
- 2024-10-03 前端 ajax 请求 Excel 文件下载的几种方式
- 2024-10-03 前端常见问题和技术解决方案 前端问题是什么意思
- 2024-10-03 springboot整合前端实现断点续传、大文件秒传以及多线程上传下载
你 发表评论:
欢迎- 最近发表
- 标签列表
-
- 前端设计模式 (75)
- 前端性能优化 (51)
- 前端模板 (66)
- 前端跨域 (52)
- 前端缓存 (63)
- 前端aes加密 (58)
- 前端脚手架 (56)
- 前端md5加密 (54)
- 前端路由 (61)
- 前端数组 (73)
- 前端js面试题 (50)
- 前端定时器 (59)
- Oracle RAC (76)
- oracle恢复 (77)
- oracle 删除表 (52)
- oracle 用户名 (80)
- oracle 工具 (55)
- oracle 内存 (55)
- oracle 导出表 (62)
- oracle约束 (54)
- oracle 中文 (51)
- oracle链接 (54)
- oracle的函数 (58)
- oracle面试 (55)
- 前端调试 (52)
本文暂时没有评论,来添加一个吧(●'◡'●)