需求:

项目要支持大文件上传功能,经过讨论,初步将文件上传大小控制在20G内,因此自己需要在项目中进行文件上传部分的调整和配置,自己将大小都以20G来进行限制。

PC端全平台支持,要求支持Windows,Mac,Linux

支持所有浏览器。

支持文件批量上传

支持文件夹上传,且要求在服务端保留层级结构。文件夹数量要求支持到10W。

支持大文件断点续传,要求刷新浏览器,重启浏览器,重启电脑后仍然能够继续上传。文件大小要求能够支持到20个G。

支持自动加载本地文件,要求能够自动加载指定的本地文件。

支持文件批量下载,要求不要在服务器打包。因为20G的文件在服务器打包时间比较长。

支持文件夹下载,要求不要在服务器打包,下载到本地后要求保留层级结构

文件列表面板支持路径导航,新建文件夹

一. 大文件上传基础描述:

  各种WEB框架中,对于浏览器上传文件的请求,都有自己的处理对象负责对Http MultiPart协议内容进行解析,并供开发人员调用请求的表单内容。

比如:

Spring 框架中使用类似CommonsMultipartFile对象处理表二进制文件信息。

而.NET 中使用HtmlInputFile/ HttpPostedFile对象处理二进制文件信息。

优点:使用框架内置对象可以很方便的处理来自浏览器的MultiPart二进制信息请求,协议分析操作不用开发人员参与。

缺点:其接收数据包过程完全被封闭在框架内置对象中,直到本次请求信息处理(接收)完毕后,才允许开发人员从接口调取表单及文件内容。上传过程中的进度信息无法访问,无法上传大尺寸文件(比如几百兆以上的大文件二进制信息)。

目标:我们要在JAVA WEB框架中,依靠Filter过滤器的能力,实现不依靠框架内置对象,从浏览器请求字节流中解析MultiPart协议,取得本次用户请求的所有信息,包括多二进制文件信息及其他表单项信息。用户上传的文件尺寸将不受限制。而且在传输过程中,我们可以实时获得当前传输进度信息。

注:.NET框架中可依靠IHttpModule接口对象达到JAVA框架中Filter的能力,本文不做描述。

之前仿造uploadify写了一个HTML5版的文件上传插件,没看过的朋友可以点此先看一下~得到了不少朋友的好评,我自己也用在了项目中,不论是用户头像上传,还是各种媒体文件的上传,以及各种个性的业务需求,都能得到满足。小小开心了一把。

但无论插件再怎么灵活,也难以应付所有的需求,比如,你要上传一个2G的文件。以现在我们的网速,恐怕再快也得传半小时。要命的是,如果你在上传到90%的时候不小心关掉了浏览器,或者是手一抖摁了F5,完了,一切还得从头再来。这种用户体验简直太糟糕了。所以,断点续传就十分有必要了。什么是续传我就不解释了,用QQ传文件这么多年,大家都见过了。

这里要说的是断点续传都有哪些技术要点。使用传统的表单提交文件或是HTML5的FormData都是将文件“整块”提交,服务端取到该文件后再进行转移、重命名等操作,因此,无法实时保存文件的已上传部分。而且在http协议下,我们无法保持浏览器与服务端的长连接,不能以文件流的形式来提交。所以要解决的问题具体来讲有以下几点:

对上传的文件进行分割,每次只上传一小片。服务端接收到文件后追加到原来部分,最后合并成完整的文件。

每次上传文件片前先获取已上传的文件大小,确定本次应切割的位置

每次上传完成后更新已上传文件大小的记录

标识客户端和服务端的文件,保证不会把A文件的内容追加到B文件上

在参考了张鑫旭大哥的这篇文章后,我将学到的技术应用在了我的插件Huploadify中,成功的添加了断点续传功能。在此将技术和插件都分享给大家。

工作原理/技术要点

首先的首先,要明确,如果我们有一个10M的文件,每次切割上传1M,那么是需要发10次请求来完成的。在http协议下,只能这么搞。断点上传分三步来完成:

选择一个文件后,获取该文件在服务器上的大小,通过本地存储或自定义的函数来获取。

根据已上传大小切割文件,发出n次请求不断向服务器提交文件片,服务端不断追加文件内容

当已上传文件大小达到文件总大小时,上传结束

首先是文件的分割,HTML5新增了Blob数据类型,并且提供了一个可以分割数据的方法:slice(),其用法和字符串、数组的slice()方法一样,可以截取一个二进制文件的一部分。

其次是文件片的保存与追加,我后台用PHP写的,先用file_get_contents获取文件的二进制格式,再用file_put_contents每次将文件追加,具体的写法可以参照后面,或者是下载我打包好的文件。

接下来我们还需要实时保存已上传文件的大小,以便于下次上传前进行正确切割。使用HTML5的localStorage是一种方法,将已上传的大小保存在本地,下次上传前先从本地读取。不过这种方式是很局限的,抛开用户可能通过各种管家清除掉本地数据不讲,假如用户在A页面上传了一个文件的50%,然后在B页面想把该文件上传到另外一个地方,结果从本地一读文件已上传50%了,直接从51%的位置开始上传了,显然是个错误。问题就在于本地不能存太多的信息,通过File API只能获取到文件的原始名称,无法正确的与服务器上的文件正确匹配。所以真正在项目中用,还得依靠服务端来保存这些数据。

关于如何将数据存在服务端,已经前端如何取数据,我在下面会讲到。

技术要点就上面的那么多了,其实也没有多少技术含量哈~来看看我的插件如何使用吧。

续传功能的使用方法

文件的引入就不讲了,可参考上一篇关于插件的介绍。关键点是新增的几个配置,先来看一下:

breakPoints:false,//是否开启断点续传

fileSplitSize:1024*1024,//断点续传的文件块大小,单位Byte,默认1M

getUploadedSize:null,//类型:function,自定义获取已上传文件的大小函数,用于开启断点续传模式,可传入一个参数file,即当前上传的文件对象,需返回number类型

saveUploadedSize:null,//类型:function,自定义保存已上传文件的大小函数,用于开启断点续传模式,可传入两个参数:file:当前上传的文件对象,value:已上传文件的大小,单位Byte

saveInfoLocal:false,//用于开启断点续传模式,是否使用localStorage存储已上传文件大小

这是插件中的默认配置值。一个续传功能竟然要配置五个项,真要命!不要着急听我慢慢道来,这五个并不是要同时出现的,是为了满足可能出现的复杂业务而准备的。

breakPoints是开启断点续传的开关,要使用的话设为true,默认是不开启的。

fileSplitSize是每次切割的文件片的大小,默认是1M,可根据实际情况来定。如果你的系统上传的文件普遍都在1G以上,可以配置的大一点。

getUploadedSize是用来自定义获取已上传的文件大小的函数,还记得上面说过的localStorage的局限吧,所以我这里直接把获取文件大小的函数交给你来定义,你可以从session、cookie,从文件、数据库或者任何地方取,可以发送一个ajax请求到你想要的地址,传递你需要的参数。注意你定义的函数将来会被插件调用,所以一定要返回一个Number类型的结果。

saveUploadedSize与getUploadedSize对应,你自己定义如何保存已上传文件的大小,只要你存的数据你自己能取到就OK。当然前提是你要注意到上面说过的localStorage的局限,确保你的逻辑正确能够操作到正确的文件。

saveInfoLocal是当你使用localStorage保存数据时需要开启的一个开关。插件默认提供使用localStorage方式的支持。只要开启此选项就可以了。当然,这种情况下你的业务逻辑必须足够简单,比如只是做一个上传的demo,或者这系统的用户只有你一个人,你明白如何避开那些局限的地方。

掌握了这五个配置的作用,你就可以实现一个足够灵活的断点上传功能了!在我打包好的文件里,提供了使用localStorage方式的demo,抱歉我无法将数据库表都发给你,所以只能用本地存储来演示。

在服务端保存数据

用户在使用上传的时候可能有各种你意想不到的操作,这里我发挥想象描述一下用户可能的行为:

同一台机器使用不同帐号登录,上传同一个文件

文件上传了一部分,然后修改了文件内容,再次上传

文件上传完成100%,再次上传该文件

同一个页面有多个上传按钮,上传同一个文件,或在不同页面上传同一个文件

仅仅上面四条,是不是情况就够复杂了?再加上你系统还有自己的业务逻辑,所以在服务端保存已上传文件数据是非常有必要的。而且保存数据和获取数据的函数都交给你来定义,抱着插件有足够的灵活性。

因为涉及到了服务端的技术,无法演示,我将我项目中的真实使用场景在此讲解一下,来展示一下如何自已定义方法来实现服务端保存数据的可靠上传。我定义的getUploadedSize函数如下:

getUploadedSize:function(file){

var data = {

data : {

fileName : file.name,

lastModifiedDate : file.lastModifiedDate.getTime()

}

};

var url = 'http://localhost/uploadfile/';

var uploadedSize = 0;

$.ajax({

url : url,

data : data,

async : false,

type : 'POST',

success : function(returnData){

returnData = JSON.parse(returnData);

uploadedSize = returnData.uploadedSize;

}

});

return uploadedSize;

}

我向后台的某个地址发送一个请求,传递文件名和文件的最后修改时间为参数,后台根据这两个参数来找到与前台所选择的文件对应的服务器上的文件,将服务器返回的文件大小return出去,来被插件使用。为什么要传递这两个参数呢?我们在前台无法知道服务器上的这个文件的名称,所以使用原始文件名作为一个辅助标识。为了防止用户在两次上传间隔修改了文件,我们把文件的最后修改时间也传给服务端,让服务端进行比较,若时间不对应则返回已上传大小为0,重新上传此文件。

再来看后台都要做哪些工作。数据库中需要有一张表来记录每个已文件的情况,包含的字段大致有:

字段

描述

client_filename

文件在客户端的原始名称

server_filename

文件在服务器上重命名后的名称

last_modified_date

文件的最后修改时间,时间戳

status

文件的状态,已完成、未完成

uploaded_size

已上传文件的大小

根据client_filename和last_modified_date,再加上系统中的其他关联信息,可以定位到本次上传的文件在服务端的大小,然后返回给客户端。当然这是我自己的用法,你也可以根据自己的需求灵活设计。总之最终的目的就是要找到前台选择的文件在服务器上真正对应的文件,并将已上传大小正确返回。

另外需注意的一点,就是在续传的第二步,不断提交文件片的过程中,也需要服务端准确定位到相应的文件,不能把A的数据追加到B上。采用的方式也是提交fileName和lastModifyDate两个参数(已写在插件内部,可服务端直接获取),服务端找到对应的文件进行追加。

另外再啰嗦一句,后台获取文件的时候需要取成二进制的,而我们提交是使用FormData来提交的,所以PHP代码需要这么写:

file_put_contents('uploads/'.$filename,file_get_contents($_FILES["file"]["tmp_name"]),FILE_APPEND);

如果上面的说明还是不够清楚,就需要你自己来探索一下了,毕竟考虑到插件可能应用在复杂的系统中,很多工作还是需要你来做的。或者你也可以给我留言,我很乐意为你解答疑惑。

该版本的其他改动

从1.0到2.0,Huploadify又新加了很多东西,不过只是新加,使用方式跟之前的没有变化。例如上面的断点续传功能,你如果不想使用,只需设置breakPoints为false即可,插件仍按照以前的方式工作。除了断点续传这个大头,插件还做了如下改动:

增加了onSelect回调函数,在选择了文件之后触发,用法与uploadify官网的一致

删除掉正在上传的文件,中断发送请求

完善了input file组件的accept属性支持,浏览时只显示运行的文件格式,就是这个东东:

4. 对外开放了方法调用接口,upload、stop、cancel、disable、ennable。我在demo中有演示。使用方法如下:

var up = $('#upload').Huploadify({

auto:false,

fileTypeExts:'*.jpg;*.png;*.exe;*.mp3;*.mp4;*.zip;*.doc;*.docx;*.ppt;*.pptx;*.xls;*.xlsx;*.pdf',

multi:true

});

up.upload(1);//开始上传文件,接收一个参数,表示上传第几个文件,可传入*上传队列中的所有文件

up.stop();//暂停上传队列中的所有文件,不接收参数。用于开启了断点需传

up.cancel(1);//删除队列中的某个文件,接收一个参数,表示删除第几个文件,可传入*删除队列中的所有文件

up.disable();//使选择文件按钮失效,不接收参数

up.ennable();//使选择文件按钮生效,不接收参数  5. 修改其他已知bug

结束

我在demo中使用了本地存储来做已上传文件大小的保存,下载压缩包后可看一下效果。上传一个比较大的视频文件,上传到中间关闭浏览器,再次打开浏览器上传同一个文件,会看到从上次断掉的地方继续上传。

详细内容可以参考我写的这篇文章:http://blog.ncmem.com/wordpress/2019/08/09/%e5%a4%a7%e6%96%87%e4%bb%b6%e4%b8%8a%e4%bc%a0%e8%a7%a3%e5%86%b3%e6%96%b9%e6%a1%88/

vue大文件上传控件选哪个好?的更多相关文章

  1. vue+大文件上传控件

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

  2. 因用了NeatUpload大文件上传控件而导致Nonfile portion > 4194304 bytes错误的解决方法

    今天遇到一个问题,就是“NeatUpload大文件上传控件而导致Nonfile portion > 4194304 bytes错误”,百度后发现了一个解决方法,跟大家分享下: NeatUploa ...

  3. 绝对好用Flash多文件大文件上传控件

    本实例采用的是Uploadify上传插件,.NET程序,源程序是从网上找的,但是有Bug,已经修改好,并标有部分注释.绝对好用,支持单文件.多文件上传,支持大文件上传,已经过多方面测试,保证好用. 以 ...

  4. 大文件上传控件webupload插件

    之前仿造uploadify写了一个HTML5版的文件上传插件,没看过的朋友可以点此先看一下~得到了不少朋友的好评,我自己也用在了项目中,不论是用户头像上传,还是各种媒体文件的上传,以及各种个性的业务需 ...

  5. Web大文件上传控件-asp.net-bug修复-Xproer.HttpUploader6.2

    版权所有 2009-2016荆门泽优软件有限公司 保留所有权利 官方网站:http://www.ncmem.com/ 产品首页:http://www.ncmem.com/webapp/up6.2/in ...

  6. Web大文件上传控件-bug修复-Xproer.HttpUploader6

    1.修复上传文件夹时,文件夹大小可能不正确的问题.这个问题是由于以MD5模式上传时没有更新文件夹总大小导致.   更新fd_complete.aspx   更新DBFile.cs-fd_complet ...

  7. web大文件上传控件-监控fd_create流程-Xproer.HttpUploader6

      监控fd_create流程 1.打开ie,f12 2.启动网络监控 点击开始捕获 上传文件夹,然后查看监控 将监控信息转到详细视图

  8. web大文件上传控件-监控f_create流程-Xproer.HttpUploader6

    监控f_create流程 1.打开ie,f12 2.启动网络监控 点击开始捕获 上传文件,然后查看监控 将监控信息转到详细视图 向f_create提交的数据 f_create返回值

  9. web大文件上传控件-设置附加参数-Xproer.HttpUploader6

    自定义附加字段在up6.js中定义,也可以不用定义: 注意: 1.附加字段必须是字符串类型. 2.如果附加字段的值包含中文,在上传前必须使用encodeURIComponent进行编码.     在引 ...

随机推荐

  1. 动手学深度学习7-从零开始完成softmax分类

    获取和读取数据 初始化模型参数 实现softmax运算 定义模型 定义损失函数 计算分类准确率 训练模型 小结 import torch import torchvision import numpy ...

  2. mysql 基本操作 三

    1.alter 创建测试表 MariaDB [jason]> create table testalter_tbl(i )); Query OK, rows affected (0.08 sec ...

  3. 微信小程序常用样式汇总

    本文系转载: 原文作者:chenzheng8975 原文地址:https://www.cnblogs.com/chenzheng8975/p/9605186.html 微信小程序常用样式汇总 小程序特 ...

  4. 【05】Saltstack:配置详解

    写在前面的话 上一节迷迷糊糊的说了一下配置管理,这一节主要谈谈我们常见的一些操作如何将他转换成配置文件的形式来实现.这样的好处在于,我们可以一次编写到处使用,不用每次再去编写复杂的命令. 配置回顾 在 ...

  5. 【01】Saltstack:从零开始 Saltstack

    写在前面的话 最近一直都在整理以前的乱七八糟的笔记,所以会有很多老旧的东西都会被拉出来重新遛遛.算是再度系统的进行学习. 关于 Saltstack 的一些概念 Saltstack 是基于 Python ...

  6. 2019-11-29-win10-uwp-手把手教你使用-asp-dotnet-core-做-cs-程序

    原文:2019-11-29-win10-uwp-手把手教你使用-asp-dotnet-core-做-cs-程序 title author date CreateTime categories win1 ...

  7. winform加快窗体加载速度

    //加快控件加载的速度 protected override CreateParams CreateParams { get { CreateParams cp = base.CreateParams ...

  8. 在Visual studio上发布web项目,并添加到IIS服务器上。

    1.首先发布到IIS上 https://blog.csdn.net/kydkong/article/details/49563193 2.NET4.0部署出错HTTP 错误500.21 - Inter ...

  9. 基于.NET平台常用的框架整理 转自 http://www.cnblogs.com/zhuyongblogs/p/5353751.html

    常用的一些开源组件整理: 导出Excel报表的插件:NOPI.dll(基于微软OpenXml实现)开源的作业调度和自动任务框架:Quartz.NET用于大数据搜索引擎的全文检索框架:Lucene.ne ...

  10. Java自学-I/O 中文问题

    Java中的编码中文问题 步骤 1 : 编码概念 计算机存放数据只能存放数字,所有的字符都会被转换为不同的数字. 就像一个棋盘一样,不同的字,处于不同的位置,而不同的位置,有不同的数字编号. 有的棋盘 ...