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

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

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

上传文件实体类：

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

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

文件初始化部分

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

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

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

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

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

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

第七步：释放缓冲区

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

文件夹扫描类

存储路径生成类

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

最后放一张实现的效果图

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • JS可断点续传文件上传实现代码解析

    刚开始学习前端开发就碰到文件上传问题,还要求可断点续传.查了很多资料,发现H5的file API刚好可以满足我们的需求,也遇到了一些问题,于是记录下来为有同样需求的朋友提供一些帮助. 一.首先,为了引入文件对象,需要在H5页面上放置一个file类型的输入标签. <input type="file" onchange="fileInfo()"> 当选择文件之后显示文件相关信息: function fileInfo() { let fileObj = doc

  • javascript之分片上传，断点续传的实际项目实现详解

    总所周知,上传大文件时由于各种原因突然中断,然后整个文件需要从头开始上传,这种情况非常令人抓狂??,那么怎样才可以避免这种尴尬的情况呢?分片上传或许可以搞定这个痛点 原理:文件上传就是把文件切割成一个个小小的块,然后块逐一上传 后台约定接口: 1.getRestChunkInfo 获取当前文件的上传情况 输入:{fileName, fileSize, md5, token} 输出:{chunk_list, chunk_size, chunk_count} chunk_list是一个数组,未上传块

  • 如何基于js管理大文件上传及断点续传详析

    如何基于js管理大文件上传及断点续传详析

    目录 前言 前端结构 后端结构(node + express) 基于FormData实现文件上传 基于BASE64实现文件上传 BASE64具体方法 前端生成文件名传给后端 上传进度管控 大文件上传 服务端代码(大文件上传+断点续传) 总结 前言 前端小伙伴们平常在开发过程中文件上传是经常遇到的一个问题,也许你能够实现相关的功能,但是做完后回想代码实现上是不是有点"力不从心"呢?你真的了解文件上传吗?如何做到大文件上传以及断电续传呢,前后端通讯常用的格式,文件上传进度管控,服务端是如何

  • js实现分割上传大文件

    js实现分割上传大文件

    本文实例介绍了js上传文件操作,分享给大家供大家参考,具体内容如下 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN"> &l

  • 利用Plupload.js解决大文件上传问题, 带进度条和背景遮罩层

    利用Plupload.js解决大文件上传问题, 带进度条和背景遮罩层

    大容量文件上传早已不是什么新鲜问题,在.net 2.0时代,HTML5也还没有问世,要实现这样的功能,要么是改web.config,要么是用flash,要么是用一些第三方控件,然而这些解决问题的方法要么很麻烦,比如改配置,要么不稳定,比如文件上G以后,上传要么死掉,要么卡住,通过设置web.config并不能很好的解决这些问题. 这是一个Html5统治浏览器的时代,在这个新的时代,这种问题已被简化并解决,我们可以利用Html5分片上传的技术,那么Plupload则是一个对此技术进行封装的前端脚本

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

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

    这里只写后端的代码,基本的思想就是,前端将文件分片,然后每次访问上传接口的时候,向后端传入参数:当前为第几块文件,和分片总数 下面直接贴代码吧,一些难懂的我大部分都加上注释了: 上传文件实体类: 看得出来,实体类中已经有很多我们需要的功能了,还有实用的属性.如MD5秒传的信息. 首先是文件数据接收逻辑,负责接收控件上传的文件块数据,然后写到服务器的文件中.控件已经提供了块的索引,大小,MD5和长度信息,我们可以根据需要来灵活进行处理,也可以将文件块的数据保存到分布式存储系统中. 文件初始化部分

  • javascript实现校验文件上传控件实例

    本文实例讲述了javascript实现校验文件上传控件.分享给大家供大家参考.具体如下: 该javascript校验文件上传控件代码可检测上传文件的类型是否是图片 <script language="javascript"> function Checkfiles() { var fup = document.getElementById('logo1'); var fileName = fup.value; var ext = fileName.substring(fil

  • php设置允许大文件上传示例代码

    用Nginx做为代理服务器, 后端为 apache2. 设置允许上传最大为100M的文件. 1. Nginx配置: http { ...... client_max_body_size 100m; ...... } 2. PHP 配置文件 ...... ; Maximum execution time of each script, in seconds ; http://php.net/max-execution-time ; Note: This directive is hardcoded

  • Python Socketserver实现FTP文件上传下载代码实例

    一.Socketserver实现FTP,文件上传.下载 目录结构 1.socketserver实现ftp文件上传下载,可以同时多用户登录.上传.下载 效果图: 二.上面只演示了下载,上传也是一样的,来不及演示了,上代码 1.客户端 import socket,hashlib,os,json,sys,time class Ftpclient(object): def __init__(self): self.client = socket.socket() def connect(self,ip,

  • java文件上传下载代码实例

    本文实例为大家分享了java文件上传下载的具体代码,供大家参考,具体内容如下 文件上传 @RequestMapping(value="/uploadFile",method=RequestMethod.POST) public ResultObject uploadFiles(@RequestParam("file")MultipartFile file,HttpServletRequest request){ ResultObject rs = null;//返回

  • Spring mvc文件上传下载代码实例

    简介 文件上传是项目开发中最常见的功能之一 ,springMVC 可以很好的支持文件上传,但是SpringMVC上下文中默认没有装配MultipartResolver,因此默认情况下其不能处理文件上传工作.如果想使用Spring的文件上传功能,则需要在上下文中配置MultipartResolver. 前端表单要求:为了能上传文件,必须将表单的method设置为POST,并将enctype设置为multipart/form-data.只有在这样的情况下,浏览器才会把用户选择的文件以二进制数据发送给

  • php中通过Ajax如何实现异步文件上传的代码实例

    1:取得file对象 2:读取2进制数据 3:模拟http请求,把数据发送出去(这里通常比较麻烦) 在forefox下使用 xmlhttprequest 对象的 sendasbinary 方法发送数据: 4:完美实现 遇到的问题 目前仅有 firefox 可以正确上传文件.(chrome也可以采google.gears上传) 对于从firefox和chrome下读取到的文件数据好像不一样(不知道是否是调试工具的原因) chrome以及其他高级浏览器没有 sendasbinary 方法 只能使用

  • Vue+Node实现大文件上传和断点续传

    Vue+Node实现大文件上传和断点续传

    目录 源代码 Blob.slice 切片 初始化文件内容 FormData.append() 大文件上传 断点续传 代码 创建切片 源码 worker 线程通讯的逻辑 断点续传 秒传 源代码 断点续传.分片上传.秒传.重试机制 文件上传是开发中的难点, 大文件上传及断点续传 难点中的细节及核心技术点. element-ui 框架的上传组件,是默认基于文件流的. 数据格式:form-data: 传递的数据: file 文件流信息:filename 文件名字 通过 fileRead.readAsDa

  • JavaScript大文件上传的处理方法之切片上传

    目录 前言 切片后上传 生成hash 文件秒传 暂停上传 中断请求示例 添加暂停上传功能 恢复上传 添加功能总结 前言 本篇介绍了切片上传的基本实现方式(前端),以及实现切片上传后的一些附加功能,切片上传原理较为简单,代码注释比较清晰就不多赘述了,后面的附加功能介绍了实现原理,并贴出了在原本代码上的改进方式.有什么错误希望大佬可以指出,感激不尽. 切片后上传 切片上传的原理较为简单,即获取文件后切片,切片后整理好每个切片的参数并发请求即可. 下面直接上代码: HTML <template> &

随机推荐