如何使用断点续传上传大文件

曾胖神父 曾胖神父     2023-03-04     599

关键词:

概念

大文件上传的需求介绍

不管怎样简单的需求,在量级达到一定层次时,都会变得异常复杂。
文件上传简单,文件变大就复杂
上传大文件时,以下几个变量会影响我们的用户体验

  • 服务器处理数据的能力
  • 请求超时
  • 网络波动
    上传时间会变长,高频次文件上传失败,失败后又需要重新上传等等,为了解决上述问题,我们需要对大文件上传单独处理,这里涉及到分片上传及断点续传两个概念。

分片上传

分片上传,就是将所要上传的文件,按照一定的大小,将整个文件分割成多个数据块(Part)来进行分片上传
如下图
一般实现方式有两种:

  • 服务器端返回,告知从哪开始
  • 浏览器端自行处理
    上传完之后再由服务端对所有上传的文件进行汇总整合成原始文件
    大致流程如下:
    1,将需要上传的文件按照一定的分割规则,分割成相同大小的数据块。
    2,初始化一个分片上传任务,返回本次分片上传唯一标识。
    3,按照一定的策略(串行或并行)发送各个分片数据块。
    4,发送完成后,服务端根据判断数据上传是否完整,如果完整,则进行数据块合成得到原始文件

断点续传

断点续传指的是在下载或上传时,将下载或上传任务人为的划分为几个部分(分片)
每一个部分采用一个线程进行上传或下载,如果碰到网络故障,可以从已经上传或下载的部分开始继续上传下载未完成的部分
,而没有必要从头开始上传下载。从而让用户节省时间,提高速度。
一般实现方式有两种:

  • 服务器端返回,告知从哪开始
  • 浏览器端自行处理

上传过程中将文件在服务器写为临时文件,等全部写完了(文件上传完),将此临时文件重命名为正式文件即可

如果中途上传中断过,下次上传的时候根据当前临时文件大小,作为在客户端读取文件的偏移量,从此位置继续读取文件数据块,上传到服务器从此偏移量继续写入文件即可

实现思路

获取文件之后,保存文件唯一性标识,使用Blob.slice切割文件,分段上传,每次上传一段,根据唯一标识判断文件上传进度,直到文件的全部片段上传完毕
具体如下图

总结

在获取文件之后,使用Blob.slice方法将大文件切割成多个切片,并将文件唯一标识(一般指的md5)与切片下标组合成切片的hash,从而让上传切片的时候不仅能保证每个切片的唯一性还可以保证后端能够识别切片顺序,然后借助http的可并发性,同时上传多个切片,这样从原本传一个大文件,变成了同时传多个小的文件切片,从而大大减少上传时间。并且为了保证上传的可连续性,可以让服务端保存已上传的切片hash,前端每次上传前向服务端获取已上传的切片hash,通过切片hash获取上传进度,从而实现断点续传功能,进而避免了重复上传。

vue解决大文件断点续传

...将大小都以501M来进行限制。第一步:前端修改由于项目使用的是BJUI前端框架,并没有使用框架本身的文件上传控件,而使用的基于jQuery的Uploadify 查看详情

vuehttp大文件断点续传上传

javaweb上传文件上传文件的jsp中的部分上传文件同样可以使用form表单向后端发请求,也可以使用ajax向后端发请求    1.通过form表单向后端发送请求         <formid="postForm"action="$pageCo... 查看详情

文件上传控件-如何上传文件-文件夹断点续传

最近遇见一个需要上传百兆大文件的需求,调研了七牛和腾讯云的切片分段上传功能,因此在此整理前端大文件上传相关功能的实现。在某些业务中,大文件上传是一个比较重要的交互场景,如上传入库比较大的Excel表格数据、... 查看详情

java使用webuploader做大文件的分块和断点续传

...将大小都以501M来进行限制。第一步:前端修改由于项目使用的是BJUI前端框架,并没有使用框架本身的文件上传控件,而使用的基于jQuery的Uploadify 查看详情

支持ie低版本的上传大文件切割上传断点续传秒传

1、 http://files.cnblogs.com/files/blackice/UploadDemo.rar此demo是使用的 swfupload2、http://download.csdn.net/detail/rememberme001/9873136支持大文件传输,先把大文件分割成每个2M的小文件分批上传,再组合成一个大文件。支持断点续传,MD5校验... 查看详情

如何使用断点续传上传大文件

概念大文件上传的需求介绍不管怎样简单的需求,在量级达到一定层次时,都会变得异常复杂。文件上传简单,文件变大就复杂上传大文件时,以下几个变量会影响我们的用户体验服务器处理数据的能力请求超时... 查看详情

springboot实现分片上传断点续传大文件极速秒传-备忘(代码片段)

...  断点续传可以看成是分片上传的一个衍生,因此可以使用分片上传的场景,都可以使用断点续传。2.3实现断点续传的核心逻辑  在分片上传的过程中,如果因为系统崩溃或者网络中断等异常因素导致上传中断,这时候客户... 查看详情

面试官:请你实现一个大文件上传和断点续传(代码片段)

...完全答对结束后花了一段时间整理了下思路,那么究竟该如何实现一个大文件上传,以及在上传中如何实现断点续传的功能呢?本文将从零搭建前端和服务端,实现一个大文件上传和断点续 查看详情

ios大文件分片上传和断点续传

总结一下大文件分片上传和断点续传的问题。因为文件过大(比如1G以上),必须要考虑上传过程网络中断的情况。http的网络请求中本身就已经具备了分片上传功能,当传输的文件比较大时,http协议自动会将文件切片(分块)... 查看详情

java如何实现大文件分片上传,断点续传和秒传

Java如何实现大文件分片上传,断点续传和秒传引言概念秒传1、什么是秒传2、实现秒传常见做法分片上传1、什么是分片上传2、分片上传的场景断点续传1、什么是断点续传2、应用场景3、实现断点续传的核心逻辑实现思路前置知识... 查看详情

teracloud传不了大文件

...了超过5G大文件。传大文件用以下方法解决如果我们需要使用工具上传单个或者多个大文件,而不是使用API、SDK编写代码上传时,可以使用ossutil。1、可以使用ossutil命令行工具的cp命令上传大文件2、可通过–bigfile-threshold参数控... 查看详情

java大文件断点续传

...ocket搭建服务器,开启相应端口,进行长连接操作2、服:使用ServerSocket.accept()方法进行阻塞,接收客户端请求3、服:每接收到一个Socket就建立一个新的线程来处理它4、客:利用Socket进行远程连接,询问已上传进度5、客: 查看详情

webuploader与django进行断点续传,大文件上传(代码片段)

需要实现的效果如下需要使用的 jsjquery.jswebuploader.hshashmap.js路由fromdjango.urlsimportpathfrom.importviewsurlpatterns=[path('index/',views.index),path('checkChunk/',views.checkChunk,name=&# 查看详情

html超大文件上传和断点续传的实现

...小都以501M来进行限制。 第一步:前端修改由于项目使用的是BJUI前端框架,并没有使用框架本身的文件上传控件,而使用的基于jQuery的Uploadify文件上传组件,在项目使用的jslib项目中找到了BJUI框架集成jQueryUploadify的部 查看详情

基于js管理大文件上传以及断点续传(代码片段)

...点"力不从心"呢?你真的了解文件上传吗?如何做到大文件上传以及断电续传呢,前后端通讯常用的格式 查看详情

java实现文件的断点续传

...将大小都以501M来进行限制。第一步:前端修改由于项目使用的是BJUI前端框架,并没有使用框架本身的文件上传控件,而使用的基于jQuery的Uploadify 查看详情

b/s之大文件分段上传断点续传

...单的PHP或者Java程序来实现基本的上传功能,然而在实际使用中会发现,这些基于脚本语言实现的上传功能模块性能很弱,一是不支持2GB以上的内容上传;二是无法支持断点续传;三是效率极低,单台服务器最多支持几十个并发... 查看详情

javahttp大文件断点续传上传组件

我们平时经常做的是上传文件,上传文件夹与上传文件类似,但也有一些不同之处,这次做了上传文件夹就记录下以备后用。首先我们需要了解的是上传文件三要素:1.表单提交方式:post(get方式提交有大小限制,post没有)2.表单的en... 查看详情