基于JavaScript实现大文件上传后端代码实例


Posted in Javascript onAugust 18, 2020

这里只写后端的代码,基本的思想就是,前端将文件分片,然后每次访问上传接口的时候,向后端传入参数:当前为第几块文件,和分片总数

下面直接贴代码吧,一些难懂的我大部分都加上注释了:

上传文件实体类:

看得出来,实体类中已经有很多我们需要的功能了,还有实用的属性。如MD5秒传的信息。

基于JavaScript实现大文件上传后端代码实例

首先是文件数据接收逻辑,负责接收控件上传的文件块数据,然后写到服务器的文件中。控件已经提供了块的索引,大小,MD5和长度信息,我们可以根据需要来灵活进行处理,也可以将文件块的数据保存到分布式存储系统中。

基于JavaScript实现大文件上传后端代码实例

文件初始化部分

基于JavaScript实现大文件上传后端代码实例

第一步:获取RandomAccessFile,随机访问文件类的对象

第二步:调用RandomAccessFile的getChannel()方法,打开文件通道 FileChannel,这块逻辑可以优化,如果以后有分布式存储需求,可以改为分布式存储,减轻单台服务器的压力。

基于JavaScript实现大文件上传后端代码实例

第三步:获取当前是第几个分块,计算文件的最后偏移量

第四步:获取当前文件分块的字节数组,用于获取文件字节长度

第五步:使用文件通道FileChannel类的 map()方法创建直接字节缓冲器MappedByteBuffer

第六步:将分块的字节数组放入到当前位置的缓冲区内mappedByteBuffer.put(byte[] b);

第七步:释放缓冲区

第八步:检查文件是否全部完成上传

基于JavaScript实现大文件上传后端代码实例

文件夹扫描类

基于JavaScript实现大文件上传后端代码实例

存储路径生成类

基于JavaScript实现大文件上传后端代码实例

好了,到此就全部结束了,如果有疑问或批评,欢迎评论和私信,我们一起成长一起学习。

最后放一张实现的效果图

基于JavaScript实现大文件上传后端代码实例

后端代码逻辑大部分是相同的,目前能够支持MySQL,Oracle,SQL。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js null undefined 空区别说明
Jun 13 Javascript
javascript开发随笔一 preventDefault的必要
Nov 25 Javascript
jquery事件机制扩展插件 jquery鼠标右键事件
Dec 21 Javascript
JS清空多文本框、文本域示例代码
Feb 24 Javascript
JS通过ajax动态读取xml文件内容的方法
Mar 24 Javascript
JavaScript触发onScroll事件的函数节流详解
Dec 14 Javascript
angular ng-repeat数组中的数组实例
Feb 18 Javascript
Vue拖拽组件开发实例详解
May 11 Javascript
基于vue展开收起动画的示例代码
Jul 05 Javascript
Vue中的Props(不可变状态)
Sep 29 Javascript
vue elementUI 表单校验功能之数组多层嵌套
Jun 04 Javascript
微信小程序实现点赞业务
Feb 10 Javascript
javascript实现扫雷简易版
Aug 18 #Javascript
详解Vue的组件中data选项为什么必须是函数
Aug 17 #Javascript
Openlayers实现扩散的动态点(水纹效果)
Aug 17 #Javascript
openLayer4实现动态改变标注图标
Aug 17 #Javascript
openlayers4实现点动态扩散
Aug 17 #Javascript
Vue实现计算器计算效果
Aug 17 #Javascript
vue-model实现简易计算器
Aug 17 #Javascript
You might like
php trim 去除空字符的定义与语法介绍
2010/05/31 PHP
PHP基于自增数据如何生成不重复的随机数示例
2017/05/19 PHP
解决安装WampServer时提示缺少msvcr110.dll文件的问题
2017/07/09 PHP
自己写了一个展开和收起的多更能型的js效果
2013/03/05 Javascript
JS操作HTML自定义属性的方法
2015/02/10 Javascript
AngularJS中$interval的用法详解
2016/02/02 Javascript
JS中取二维数组中最大值的方法汇总
2016/04/17 Javascript
url中的特殊符号有什么含义(推荐)
2016/06/17 Javascript
jQuery插件cxSelect多级联动下拉菜单实例解析
2016/06/24 Javascript
轻松掌握JavaScript装饰者模式
2016/08/27 Javascript
利用JQuery实现datatables插件的增加和删除行功能
2017/01/06 Javascript
jquery实现input框获取焦点的简单实例
2017/01/26 Javascript
深入理解React中何时使用箭头函数
2017/08/23 Javascript
vue项目优化之通过keep-alive数据缓存的方法
2017/12/11 Javascript
vue的全局提示框组件实例代码
2018/02/26 Javascript
jQuery实现数字自动增加或者减少的动画效果示例
2018/12/11 jQuery
ES6顶层对象、global对象实例分析
2019/06/14 Javascript
JS跨浏览器解析XML应用过程详解
2020/10/16 Javascript
Vue获取微博授权URL代码实例
2020/11/04 Javascript
[04:55]完美世界副总裁蔡玮:DOTA2的自由、公平与信任
2013/12/18 DOTA
[01:17]辉夜杯战队访谈宣传片—EHOME
2015/12/25 DOTA
Python 如何访问外围作用域中的变量
2016/09/11 Python
python实现解数独程序代码
2017/04/12 Python
基于python3 类的属性、方法、封装、继承实例讲解
2017/09/19 Python
python3爬虫学习之数据存储txt的案例详解
2019/04/24 Python
python 实现兔子生兔子示例
2019/11/21 Python
Pytorch实现将模型的所有参数的梯度清0
2020/06/24 Python
python+django+selenium搭建简易自动化测试
2020/08/19 Python
python实现邮件循环自动发件功能
2020/09/11 Python
纯css3(无图片/js)制作的几个社交媒体网站的图标
2013/03/21 HTML / CSS
Abbacino官网:包、钱包和女士配饰
2019/04/15 全球购物
财产公证书样本
2014/04/04 职场文书
小学学雷锋活动总结
2014/04/25 职场文书
感恩老师演讲稿600字
2014/08/28 职场文书
CSS极坐标的实例代码
2021/06/03 HTML / CSS
CSS精灵图的原理与使用方法介绍
2022/03/17 HTML / CSS