webuploader

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

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

是什么？ 使用springboot,activiti,mybatis,vue elementui开发的后台管理系统（包含权限管理、工作流等功能），真正前后端分离的微服务架构,经过很多项目实战、淬炼、软件开发公司主流技术的集大成者。 功能点、技术点 前端采用vue element ui框架，后端spring boot,mybatis开发框架，数据库:mysql，前后端分离。 采用activiti工作流工作流框架， 自定义流程设计 流程提供发起、跳转、转办、委派、授权、任务处理，人员角色获取、角色类型获取、 会签 等功能。 采用安全框架 Spring Security (登录授权)实现组织机构、角色，人员、功能权限、 数据权限 功能。 提供 页面扩展 功能， 拖拽及可以扩展页面功能 后端多模块项目（基础设施子项目、基础功能子项目、业务功能子项目），结构清晰、各子项目独立扩展、升级。 后端系统组件化，提供 分页 、 树形 、 通用查询 数据结构，封装系统复杂度，只需要写出简单的业务代码，即能完成一个复杂的功能。 前端项目多模块（基础组件、通用框架、基础功能，业务功能），结构清晰，子项目独立。 前后端完美结合，很简单的代码即可以实现分页列表、树形等复杂页面。 前端提供数字输入、货币输入（ 输入时自动中文货币提示 ）、百分比输入、整数输入、 字典下拉 、日期快捷输入、日期范围输入表单控件。

1，项目调研 因为需要研究下断点上传的问题。找了很久终于找到一个比较好的项目。 在GoogleCode上面，代码弄下来超级不方便，还是配置hosts才好，把代码重新上传到了github上面。 https://github.com/freewebsys/java-large-file-uploader-demo 效果： 上传中，显示进度，时间，百分比。 点击【Pause】暂停，点击【Resume】继续。 2，代码分析 原始项目： https://code.google.com/p/java-large-file-uploader/ 这个项目最后更新的时间是 2012 年，项目进行了封装使用最简单的方法实现了http的断点上传。 因为html5 里面有读取文件分割文件的类库，所以才可以支持断点上传，所以这个只能在html5 支持的浏览器上面展示。 同时，在js 和 java 同时使用 cr32 进行文件块的校验，保证数据上传正确。 代码在使用了最新的servlet 3.0 的api，使用了异步执行，监听等方法。 上传类UploadServlet @Component("javaLargeFileUploaderServlet") @WebServlet(name = "javaLargeFileUploaderServlet", urlPatterns = { "

1.使用PHP的创始人 Rasmus Lerdorf 写的APC扩展模块来实现（ http://pecl.php.net/package/apc ） APC实现方法： 安装APC，参照官方文档安装，可以使用PECL模块安装方法快速简捷，这里不说明 配置php.ini，设置参数 apc.rfc1867=1 ，使APC支持上传进度条功能，在APC源码说明文档里面有说明 代码范例： 大文件（50G）上传的实现细节： 服务端接收文件数据的处理逻辑代码： 2.使用PECL扩展模块uploadprogress实现（ http://pecl.php.net/package/uploadprogress ） uploadprogress 模块实现方法： 使用PECL模块安装方法安装该模块 php.ini里面设置 uploadprogress.file.filename_template = “/tmp/upd_%s.txt” 代码范例： 进度的处理逻辑比较简单，只是更新数据库中的数据就行了。不需要做其它的处理。 客户端代码如下： 服务端代码如下： 实现后的效果： 强大的文件夹上传，能够轻松支持10W级别的文件夹上传。 速度还不错 文件支持续传，支持刷新浏览器，关闭浏览器，重启电脑之后仍然能够续传。 可以参考这篇文章： http://blog.ncmem.com/wordpress/2019/08

1、介绍enctype enctype 属性规定发送到服务器之前应该如何对表单数据进行编码。 enctype作用是告知服务器请求正文的MIME类型（请求消息头content-type的作用一样） 1、1 enctype的取值有三种 值 描述 application/x-www-form-urlencoded 在发送前编码所有字符（默认） multipart/form-data 不对字符编码。每一个表单项分割为一个部件 text/plain 空格转换为 “+” 加号，但不对特殊字符编码。 1. 当enctype=’application/x-www-form-urlencoded’ 2.当enctype=’multipart/form-data’ 通过观察发现这个的请求体就发生了变化。这种请求体被称之为多部件请求体。 什么是多部件请求体：就是把每一个表单项分割为一个部件。 以请求头的content-type的boundary后面的一串随机字符串作为分割标识 普通表单项： //name的意思是文本框里面name的属性值，而admin是我们输入的文本值 Content-Disposition: form-data; name="username" admin 文件表单项 //filename的意思是：我们上传的文件名称，content-Type的意思是：MIME类型

目录 1. 前言 2. 关于vue-simple-uploader 3. 基于vue-simple-uploader封装全局上传组件 4. 文件上传流程概览 5. 文件分片 6. MD5的计算过程 7. 秒传及断点续传 7.1 对于前端来说 7.2 前端做分片检验：checkChunkUploadedByResponse 8. 源码及后记 8.1 关于第一个分片丢失问题 2019/8/6更新 1. 前言 之前公司要在管理系统中做一个全局上传插件，即切换各个页面的时候，上传界面还在并且上传不会受到影响，这在vue这种spa框架面前并不是什么难题。然而后端大佬说我们要实现 分片上传 、 秒传 以及 断点续传 的功能，听起来头都大了。 很久之前我写了一篇webuploader的文章，结果使用起来发现问题很多，且官方团队不再维护这个插件了， 经过多天调研及踩雷，最终决定基于 vue-simple-uploader 插件实现该功能，在项目中使用起来无痛且稳定。 如果你只是想实现基本的（非定制化的）上传功能，直接使用 vue-simple-uploader ，多读一下它的文档，不需要更多的二次封装。 如果你只是想实现全局上传插件，也可以参照一下我的实现。 如果你用到了分片上传、秒传及断点续传这些复杂的功能，恭喜你，这篇文章的重点就在于此。 本文源码在此： https://github.com

本人在2010年时使用swfupload为核心进行文件的批量上传的解决方案。见文章：WEB版一次选择多个文件进行批量上传(swfupload)的解决方案。 本人在2013年时使用plupload为核心进行文件的批量上传的解决方案。见文章：WEB版一次选择多个文件进行批量上传(Plupload)的解决方案 最近在学习百度的开源上传组件WebUploader，写了一些示例以记录。WebUploader的缺点是没有一个比较好的现成的界面，这个界面需要自己去实现。自由度高了一些。 WebUploader是由Baidu WebFE(FEX)团队开发的一个简单的以HTML5为主，FLASH为辅的现代文件上传组件。在现代的浏览器里面能充分发挥HTML5的优势，同时又不摒弃主流IE浏览器，沿用原来的FLASH运行时，兼容IE6+，iOS 6+, android 4+。两套运行时，同样的调用方式，可供用户任意选用。浏览器支持ie6,ie7,ie8,ie9,ie10,ie11,firefox,chrome,edge。支持全平台操作系统：Windows,Mac,Linux支持文件夹上传下载，文件批量上传下载，层级目录保存。 关于WebUploader的功能说明： 大文件上传续传 支持超大文件上传(100G+)和续传，可以关闭浏览器，重启系统后仍然继续上传。 开源 提供ASP.NET,JSP

用于生产环境中的PHP需要对其进行优化，让PHP自身发挥更好的性能，除了写好PHP代码，还要配置好php-fpm以及php.ini调优。本文从内存、OPcache、上传、会话以及安全等方面讲解php.ini的配置调优。 内存优化 运行 PHP 时需要关心每个 PHP 进程要使用多少内存，php.ini 中的 memory_limit 设置用于设定单个 PHP 进程可以使用的系统内存最大值。 这个设置的默认值是 128M，这对于大多数中小型 PHP 应用来说或许合适，不过，如果运行的是微型 PHP 应用，可以降低这个值，以便节省系统资源，反之，如果运行的是内存集中型 PHP 应用，可以增加这个值。这个值的大小由可用的系统内存决定，确定给 PHP 分配多少值是一门艺术，决定给 PHP 分配多少内存，以及能负担起多少个 PHP-FPM 进程时，可以根据以下维度信息进行判断： 一共可以分配给 PHP 多少内存？以一个 2G 内存的 VPS 为例，这台设备中可能还运行了其他进程，如 MySQL、Nginx 等，那么留 512M 给 PHP 是合适的。 每个 PHP 进程平均耗费多少内存？这个要监控进程的内存使用量，可以使用命令行命令top，也可以在 PHP 脚本中调用 memory_get_peak_usage() 函数，不管使用哪种方式，都要多次运行同一个脚本，然后取内存消耗的平均值。

一、 功能性需求与非功能性需求 要求操作便利，一次选择多个文件和文件夹进行上传； 支持PC端全平台操作系统，Windows,Linux,Mac 支持文件和文件夹的批量下载，断点续传。刷新页面后继续传输。关闭浏览器后保留进度信息。 支持文件夹批量上传下载，服务器端保留文件夹层级结构，服务器端文件夹层级结构与本地相同。 支持大文件批量上传（20G）和下载，同时需要保证上传期间用户电脑不出现卡死等体验； 支持文件夹上传，文件夹中的文件数量达到1万个以上，且包含层级结构。 支持断点续传，关闭浏览器或刷新浏览器后仍然能够保留进度。 支持文件夹结构管理，支持新建文件夹，支持文件夹目录导航 交互友好，能够及时反馈上传的进度； 服务端的安全性，不因上传文件功能导致JVM内存溢出影响其他功能使用； 最大限度利用网络上行带宽，提高上传速度； 二、 设计分析 对于大文件的处理，无论是用户端还是服务端，如果一次性进行读取发送、接收都是不可取，很容易导致内存问题。所以对于大文件上传，采用切块分段上传 从上传的效率来看，利用多线程并发上传能够达到最大效率。 三、解决方案： 文件上传页面的前端可以选择使用一些比较好用的上传组件，例如百度的开源组件WebUploader，泽优软件的up6，这些组件基本能满足文件上传的一些日常所需功能，如异步上传文件，文件夹，拖拽式上传，黏贴上传，上传进度监控，文件缩略图