断点续传

js解决大文件断点续传

ぃ、小莉子 提交于 2019-12-16 13:18:01
最近遇见一个需要上传百兆大文件的需求,调研了七牛和腾讯云的切片分段上传功能,因此在此整理前端大文件上传相关功能的实现。 在某些业务中,大文件上传是一个比较重要的交互场景,如上传入库比较大的Excel表格数据、上传影音文件等。如果文件体积比较大,或者网络条件不好时,上传的时间会比较长(要传输更多的报文,丢包重传的概率也更大),用户不能刷新页面,只能耐心等待请求完成。 下面从文件上传方式入手,整理大文件上传的思路,并给出了相关实例代码,由于PHP内置了比较方便的文件拆分和拼接方法,因此服务端代码使用PHP进行示例编写。 本文相关示例代码位于github上,主要参考 聊聊大文件上传 大文件切割上传 文件上传的几种方式 首先我们来看看文件上传的几种方式。 普通表单上传 使用PHP来展示常规的表单上传是一个不错的选择。首先构建文件上传的表单,并指定表单的提交内容类型为enctype="multipart/form-data",表明表单需要上传二进制数据。 然后编写index.php上传文件接收代码,使用move_uploaded_file方法即可(php大法好…) form表单上传大文件时,很容易遇见服务器超时的问题。通过xhr,前端也可以进行异步上传文件的操作,一般由两个思路。 文件编码上传 第一个思路是将文件进行编码,然后在服务端进行解码,之前写过一篇在前端实现图片压缩上传的博客

.net解决大文件断点续传

回眸只為那壹抹淺笑 提交于 2019-12-16 10:57:17
以ASP.NET Core WebAPI 作后端 API ,用 Vue 构建前端页面,用 Axios 从前端访问后端 API ,包括文件的上传和下载。 准备文件上传的API #region 文件上传 可以带参数 [HttpPost("upload")] public JsonResult uploadProject(IFormFile file, string userId) { if (file != null) { var fileDir = "D:\\aaa"; if (!Directory.Exists(fileDir)) { Directory.CreateDirectory(fileDir); } //文件名称 string projectFileName = file.FileName; //上传的文件的路径 string filePath = fileDir + $@"\{projectFileName}"; using (FileStream fs = System.IO.File.Create(filePath)) { file.CopyTo(fs); fs.Flush(); } return Json("ok"); }else{ return Json("no"); } } #endregion 前端vue上传组件 ( 利用Form表单上传 )

js大文件分块上传断点续传demo

筅森魡賤 提交于 2019-12-14 06:07:25
文件夹上传:从前端到后端 文件上传是 Web 开发肯定会碰到的问题,而文件夹上传则更加难缠。网上关于文件夹上传的资料多集中在前端,缺少对于后端的关注,然后讲某个后端框架文件上传的文章又不会涉及文件夹。今天研究了一下这个问题,在此记录。 先说两个问题: 是否所有后端框架都支持文件夹上传? 是否所有浏览器都支持文件夹上传? 第一个问题:YES,第二个问题:NO 只要后端框架对于表单的支持是完整的,那么必然支持文件夹上传。至于浏览器,截至目前,只有 Chrome 支持。 如果需要其它的浏览器支持则需要借助于插件,比如泽优大文件上传控件: www.webuploader.net 关于WebUploader的功能说明: 大文件上传续传 支持超大文件上传(100G+)和续传,可以关闭浏览器,重启系统后仍然继续上传。 开源 提供ASP.NET,JSP,PHP示例和源代码,其中JSP提供MySQL,Oracle,SQL Server数据库的配置和示例代码。 分片、并发 分片与并发结合,将一个大文件分割成多块,并发上传,极大地提高大文件的上传速度。 当网络问题导致传输错误时,只需要重传出错分片,而不是整个文件。另外分片传输能够更加实时的跟踪上传进度。 预览、压缩 支持常用图片格式jpg,jpeg,gif,bmp,png预览与压缩,节省网络数据传输。 解析jpeg中的meta信息

php解决大文件断点续传

故事扮演 提交于 2019-12-14 02:15:37
核心原理: 该项目核心就是文件分块上传。前后端要高度配合,需要双方约定好一些数据,才能完成大文件分块,我们在项目中要重点解决的以下问题。 * 如何分片; * 如何合成一个文件; * 中断了从哪个分片开始。 如何分,利用强大的js库,来减轻我们的工作,市场上已经能有关于大文件分块的轮子,虽然程序员的天性曾迫使我重新造轮子。但是因为时间的关系还有工作的关系,我只能罢休了。最后我选择了百度的WebUploader来实现前端所需。 如何合,在合之前,我们还得先解决一个问题,我们如何区分分块所属那个文件的。刚开始的时候,我是采用了前端生成了唯一uuid来做文件的标志,在每个分片请求上带上。不过后来在做秒传的时候我放弃了,采用了Md5来维护分块和文件关系。 在服务端合并文件,和记录分块的问题,在这方面其实行业已经给了很好的解决方案了。参考迅雷,你会发现,每次下载中的时候,都会有两个文件,一个文件主体,另外一个就是文件临时文件,临时文件存储着每个分块对应字节位的状态。 这些都是需要前后端密切联系才能做好,前端需要根据固定大小对文件进行分片,并且请求中要带上分片序号和大小。前端发送请求顺利到达后台后,服务器只需要按照请求数据中给的分片序号和每片分块大小(分片大小是固定且一样的)算出开始位置,与读取到的文件片段数据,写入文件即可。 为了便于开发,我 将服务端的业务逻辑进行了如下划分,分成初始化

asp.net解决大文件断点续传

大兔子大兔子 提交于 2019-12-13 15:45:34
以ASP.NET Core WebAPI 作后端 API ,用 Vue 构建前端页面,用 Axios 从前端访问后端 API ,包括文件的上传和下载。 准备文件上传的API #region 文件上传 可以带参数 [HttpPost("upload")] public JsonResult uploadProject(IFormFile file, string userId) { if (file != null) { var fileDir = "D:\\aaa"; if (!Directory.Exists(fileDir)) { Directory.CreateDirectory(fileDir); } //文件名称 string projectFileName = file.FileName; //上传的文件的路径 string filePath = fileDir + $@"\{projectFileName}"; using (FileStream fs = System.IO.File.Create(filePath)) { file.CopyTo(fs); fs.Flush(); } return Json("ok"); }else{ return Json("no"); } } #endregion 前端vue上传组件 ( 利用Form表单上传 )

js大文件分块上传断点续传demo

大兔子大兔子 提交于 2019-12-13 01:18:34
文件夹上传:从前端到后端 文件上传是 Web 开发肯定会碰到的问题,而文件夹上传则更加难缠。网上关于文件夹上传的资料多集中在前端,缺少对于后端的关注,然后讲某个后端框架文件上传的文章又不会涉及文件夹。今天研究了一下这个问题,在此记录。 先说两个问题: 是否所有后端框架都支持文件夹上传? 是否所有浏览器都支持文件夹上传? 第一个问题:YES,第二个问题:NO 只要后端框架对于表单的支持是完整的,那么必然支持文件夹上传。至于浏览器,截至目前,只有 Chrome 支持。 如果需要其它的浏览器支持则需要借助于插件,比如泽优大文件上传控件: www.webuploader.net 关于WebUploader的功能说明: 大文件上传续传 支持超大文件上传(100G+)和续传,可以关闭浏览器,重启系统后仍然继续上传。 开源 提供ASP.NET,JSP,PHP示例和源代码,其中JSP提供MySQL,Oracle,SQL Server数据库的配置和示例代码。 分片、并发 分片与并发结合,将一个大文件分割成多块,并发上传,极大地提高大文件的上传速度。 当网络问题导致传输错误时,只需要重传出错分片,而不是整个文件。另外分片传输能够更加实时的跟踪上传进度。 预览、压缩 支持常用图片格式jpg,jpeg,gif,bmp,png预览与压缩,节省网络数据传输。 解析jpeg中的meta信息

php之大文件断点续传

蹲街弑〆低调 提交于 2019-12-12 08:10:02
前段时间做视频上传业务,通过网页上传视频到服务器。 视频大小 小则几十M,大则 1G+,以一般的HTTP请求发送数据的方式的话,会遇到的问题:1,文件过大,超出服务端的请求大小限制;2,请求时间过长,请求超时;3,传输中断,必须重新上传导致前功尽弃; 解决方案: 1,修改服务端上传的限制配置;Nginx 以及 PHP 的上传文件限制 不宜过大,一般5M 左右为好; 2,大文件分片,一片一片的传到服务端,再由服务端合并。这么做的好处在于一旦上传失败只是损失一个分片而已,不用整个文件重传,而且每个分片的大小可以控制在4MB以内,服务端限制在4M即可。 前端 Web前端可使用HttpUploader6的大文件上传控件6;官网地址: http://t.cn/EyI6vHh <div class="section section6 section5"> <div class="part1"><a href="javascript:;" target="_blank" class="part1__btn">批量删除</a><span class="part1__txt"><em class="part1__num" id="upload_num">0</em>个视频,共 <em class="part1__num" id="upload_size">0M</em></span></div>

.net大文件分块上传断点续传demo

孤街浪徒 提交于 2019-12-12 04:11:16
IE的自带下载功能中没有断点续传功能,要实现断点续传功能,需要用到HTTP协议中鲜为人知的几个响应头和请求头。 一. 两个必要响应头Accept-Ranges、ETag 客户端每次提交下载请求时,服务端都要添加这两个响应头,以保证客户端和服务端将此下载识别为可以断点续传的下载: Accept-Ranges:告知下载客户端这是一个可以恢复续传的下载,存放本次下载的开始字节位置、文件的字节大小; ETag:保存文件的唯一标识(我在用的文件名+文件最后修改时间,以便续传请求时对文件进行验证); Last-Modified:可选响应头,存放服务端文件的最后修改时间,用于验证 二. 一个重要请求头Range Range:首次下载时,Range头为null,此时服务端的响应头中必须添加响应头Accept-Ranges、ETag; 续传请求时,其值表示客户端已经收到的字节数,即本次下载的开始字节位置,服务端依据这个 值从相应位置读取数据发送到客户端。 三. 用于验证的请求头If-Range、 当响应头中包含有Accept-Ranges、ETag时,续传请求时,将包含这些请求头: If-Range:对应响应头ETag的值; Unless-Modified-Since:对应响应头Last-Modified的值。 续传请求时,为了保证客户端与服务端的文件的一致性和正确性,有必要对文件进行验证

php之大文件断点续传

人走茶凉 提交于 2019-12-11 10:06:10
前段时间做视频上传业务,通过网页上传视频到服务器。 视频大小 小则几十M,大则 1G+,以一般的HTTP请求发送数据的方式的话,会遇到的问题:1,文件过大,超出服务端的请求大小限制;2,请求时间过长,请求超时;3,传输中断,必须重新上传导致前功尽弃; 解决方案: 1 ,修改服务端上传的限制配置;Nginx 以及 PHP 的上传文件限制 不宜过大,一般5M 左右为好; 2 ,大文件分片,一片一片的传到服务端,再由服务端合并。这么做的好处在于一旦上传失败只是损失一个分片而已,不用整个文件重传,而且每个分片的大小可以控制在4MB以内,服务端限制在4M即可。 前端 Web 前端可使用HttpUploader6的大文件上传控件6;官网地址: http://t.cn/EyI6vHh < div class ="section section6 section5"> < div class ="part1">< a href ="javascript:;" target ="_blank" class ="part1__btn"> 批量删除 </ a >< span class ="part1__txt">< em class ="part1__num" id ="upload_num"> 0 </ em > 个视频,共 < em class ="part1__num" id ="upload

web之大文件断点续传

半城伤御伤魂 提交于 2019-12-11 00:47:30
之前仿造 uploadify 写了一个HTML5版的文件上传插件,没看过的朋友可以 点此 先看一下~得到了不少朋友的好评,我自己也用在了项目中,不论是用户头像上传,还是各种媒体文件的上传,以及各种个性的业务需求,都能得到满足。小小开心了一把。 但无论插件再怎么灵活,也难以应付所有的需求,比如,你要上传一个2G的文件。以现在我们的网速,恐怕再快也得传半小时。要命的是,如果你在上传到90%的时候不小心关掉了浏览器,或者是手一抖摁了F5,完了,一切还得从头再来。这种用户体验简直太糟糕了。所以,断点续传就十分有必要了。什么是续传我就不解释了,用QQ传文件这么多年,大家都见过了。 这里要说的是断点续传都有哪些技术要点。使用传统的表单提交文件或是HTML5的FormData都是将文件“整块”提交,服务端取到该文件后再进行转移、重命名等操作,因此,无法实时保存文件的已上传部分。而且在http协议下,我们无法保持浏览器与服务端的长连接,不能以文件流的形式来提交。所以要解决的问题具体来讲有以下几点: 对上传的文件进行分割,每次只上传一小片。服务端接收到文件后追加到原来部分,最后合并成完整的文件。 每次上传文件片前先获取已上传的文件大小,确定本次应切割的位置 每次上传完成后更新已上传文件大小的记录 标识客户端和服务端的文件,保证不会把A文件的内容追加到B文件上 在参考了张鑫旭大哥的 这篇文章 后