list.vue
comUpload.js
前端git项目
后端git地址
链接地址
‘贰’ JS-超大文件上传-如何上传文件-大文件上传
可以试试这样
前端通过 input type = "file" 接收文件
然后使用文件的 slice 的方法对文件进行分片
将每一片提交到后台依次提交到后台，提交时通过 formData 提交，添加几个字段
(1). 这次上传文件的惟一 id
(2). 上传的状态，是开始，还是上传中，还是上传结束
(3). 分片的位置，比如是第一片，第二片
(4). 分片的数据
后端当接收到一个文件 id 的结束标识时，把对应的分片按位置数据拼接起来就行
‘叁’ js指定读取上传文件的行数
JS指定读取上传文件的行数，对这点的话还需要进行什么？需要进行一个指定的读取，一方面儿指定读取，它能精确到什么位置呢？青岛有多少行，第一个是多少行，第二个是有多少字儿，第三个有多少个，这个编码的一个情况，一共这么三个方式，三种这个类型可以说是齐头并进，所以这S来讲的话，他尤其面对这个确定一个行数，确定文件内容，以及确定这个文件字数来讲的话，这里面实际上发挥了非常大的作用，可以这么讲
‘肆’ 文件上传漏洞原理是什么
文件上传原理
在文件上传的功能处，若服务端脚本语言未对上传的文件进行严格验证和过滤，导致恶意用户上传恶意的脚本文件时，就有可能获取执行服务端命令的能力，这就是文件上传漏洞。
文件上传漏洞高危触发点
相册、头像上传
视频、照片分享
附件上传（论坛发帖、邮箱）
文件管理器
存在文件上传功能的地方都有可能存在文件上传漏洞，比如相册、头像上传，视频、照片分享。论坛发帖和邮箱等可以上传附件的地方也是上传漏洞的高危地带。另外像文件管理器这样的功能也有可能被攻击者所利用值得注意的是，如果移动端也存在类似的操作的话，那么相同的原理，也存在文件上传漏洞的风险。
为了防御文件上传漏洞的产生，需要在服务端做严格的防护，因为浏览器、客户端传回的数据并不可信任。首先是第一道防线，文件类型检测，上传的文件需要经过严格的文件类型检测防止上传的文件是恶意脚本。
上传之后的文件要进行重命名。
如果上传的文件是图片类型，可以选择使用重绘图的方式对图片进行保存，但是这种方式会对服务端性能稍有影响
最后，文件上传的目录不可赋予可执行权限，可以使用BOS这样的云存储服务，当然最方便的还是使用BOS这样现成的云存储服务
‘伍’ js文件上传中遇到的知识点
在前端开发中，我们经常遇到上传文件的需求，以前都是用到时再找资料，但总是感觉对这块不熟，最近翻资料学习了一下，记录一下。
本文中涉及的知识点有：FileList对象，Blob对象，File对象，URL对象、FormData对象等。
本文参考 网道 ，总结而来。另外，强烈推荐网道，可以去 网道的官方 看看，是阮一峰大神发起的项目，提供互联网开发文档，文档非常全面易懂。
FileList对象，是一个像数组的对象，拥有length属性和item()方法，同时，它的每一项都是File对象。
input 标签，将type设为file，之后得到的files属性就是一个FileList对象。
blob 对象表示1个二进制文件的数据内容。blob对象和arraybuffer区别是，blob对象用于操作二进制文件，arraybuffer用于操作内存。
blob 对象拥有2个属性和1个方法，分别是size(单位是字节)、type属性和slice()方法。
File 对象是一种特殊的Blob 对象。它在继承了size、type属性外，还同时有name、lastModified、lastModifiedDate等几个属性。
FileList 对象中的每一项都是File 对象。
拿到File 对象之后就要进行操作，下面是操作。
URL.createObjectURL(file) 允许为File 对象创建一个临时链接，
FileReader 对象的属性和方法比较多，属性中比较重要的是result，方法中比较重要的是
FileReader 对象的所有属性和方法可以参考 这里 ,这里就不再列出来了。
在早期的互联网时候，提交数据都是用表单。表单提交数据有些缺陷，例如无法校验表单数据，会刷新整个页面等。随着Ajax的兴起，页面表单提交数据慢慢退出历史舞台，但有时上传文件时我们偶尔会用到表单提交数据。
在调用构造函数new FormData(form)构造formdata对象时需要传入form节点，如果不传入，则默认构建空表单。如果传入，则按照key=value的时候构建表单。
可以看看效果图
FormData 对象主要的方法有：
cavas压缩图片其实很简单，无非就是几个步骤：
1、选择图片，判断图片是否大于2M（用File对象的size进行判断，size的单位是字节）；
2、用FileReader对象读取文件成base64,
3、然后创建Image对象，赋值src属性，在Image对象加载完成的回调里创建cavas并绘制图片(根据图片是否大于2M动态调整画布大小)；
4、将cavas转成blob，拼在formdata中用ajax上传。
这篇文章到这里也就结束了，这篇文章包含了一些浏览器中提供的对象，可以看到都是很简单的内容。
‘陆’ js 大文件分片上传处理如何实现
推荐采用webuploader控件来解决。
关于WebUploader的功能说明：
大文件上传续传
支持超大文件上传(100G+)和续传，可以关闭浏览器，重启系统后仍然继续上传。
开源
提供ASP.NET,JSP,PHP示例和源代码，其中JSP提供MySQL,Oracle,SQL Server数据库的配置和示例代码。
分片、并发
分片与并发结合，将一个大文件分割成多块，并发上传，极大地提高大文件的上传速度。
当网络问题导致传输错误时，只需要重传出错分片，而不是整个文件。另外分片传输能够更加实时的跟踪上传进度。
预览、压缩
支持常用图片格式jpg,jpeg,gif,bmp,png预览与压缩，节省网络数据传输。
解析jpeg中的meta信息，对于各种orientation做了正确的处理，同时压缩后上传保留图片的所有原始meta数据。
多途径添加文件
支持文件多选，类型过滤，拖拽(文件&文件夹)，图片粘贴功能。上传本地指定路径的文件，不需要通过点击按钮选择文件。
粘贴功能主要体现在当有图片数据在剪切板中时（截屏工具如QQ(Ctrl + ALT + A), 网页中右击图片点击复制），Ctrl + V便可添加此图片文件。
HTML5 & FLASH
兼容主流浏览器和低版本浏览器，接口一致，实现了两套运行时支持，用户无需关心内部用了什么内核。而且支持IE6，IE8浏览器。
同时Flash部分没有做任何UI相关的工作，方便不关心flash的用户扩展和自定义业务需求。
基于内存映射模式进行IO操作，充分发挥操作系统性能。
MD5秒传
当文件体积大、量比较多时，支持上传前做文件md5值验证，一致则可直接跳过。
如果服务端与前端统一修改算法，取段md5，可大大提升验证性能，耗时在20ms左右。
易扩展、可拆分
采用可拆分机制, 将各个功能独立成了小组件，可自由搭配。
采用AMD规范组织代码，清晰明了，方便高级玩家扩展。
‘柒’ 最近在研究nodejs如何实现文件上传功能
前端formdata或者Ajax上传文件
Node端：用multiparty接收文件，再用fs.rename将文件存储到你需要的位置。
var MULTIPARTY = require('multiparty');
var FS = require('fs');
var saveTowerFile = function (req, res, next) {
var form = new MULTIPARTY.Form({uploadDir: "../appData/excel/"});
form.parse(req, function (err, fields, files) {
if (err) {
console.log("上传失败！" + err);
var errcode = {result: "失败"};
res.send(errcode);
return;
} else {
var inputFile = files.file[0];
var uploadedPath = inputFile.path;
var dstPath = '../appData/excel/' + UUID.v1();
FS.rename(uploadedPath, dstPath, function(err) {
if (err) {
var errcode = {result: "失败"};
res.send(errcode);
return;
} else {
debug('rename ok');
res.send(“OK”);
}
})
}
});
};
‘捌’ 文件上传漏洞
在上网的过程中，经常会将一些如图片、压缩包之类的文件上传到远端服务器进行保存。文件上传攻击指的是恶意攻击者利用一些站点没有对文件的类型做很好的校验，上传了可执行的文件或者脚本，并且通过脚本获得服务器上相应的权利，或者是通过诱导外部用户访问、下载上传的病毒或木马文件，达到攻击的目的。为了防范用户上传恶意的可执行文件和脚本，以及将文件上传服务器当做免费的文件存储服务器使用，我们需要对上传的文件类型进行白名单（非黑名单，这点非常重要）校验，并且限制上传文件的大小，上传的文件需要进行重新命名，使攻击者无法猜测到上传文件的访问路径。
对于上传的文件来说，不能简单地通过后缀名称来判断文件的类型，因为恶意攻击可以将可执行文件的后缀名称改成图片或者其他后缀类型，诱导用户执行。因此，判断文件类型需要使用更安全的方式。很多类型的文件，起始的几个字节内容是固定的，因此，根据这几个字节的内容，就可以确定文件类型，这几个字节也被称为魔数( magic number)。
‘玖’ java web前端上传文件到后台常用的几种方式
1、使用form表单提交
但是这里要记得添加enctype属性，这个属性是指定form表单在向服务器提交之前，对表单数据如何进行编码。 文件域中的name="file"属性的值，需要和后台接收的对象名一致，不然接收不到。
2、使用ajax提交文件
使用ajax提交首先引入jquery-form.js文件才能实现，接着使用上面的html代码，加入以js则可以实现ajax提交文件。
3、使用FormData对象
4、后台接收文件，框架采用的Spring Boot 微服务框架，因为该框架搭建很方便所以采用这个框架写例子。
‘拾’ 使用jquery.form.js实现文件上传及进度条前端代码
ajax的表单提交只能提交data数据到后台，没法实现file文件的上传还有展示进度功能，这里用到form.js的插件来实现，搭配css样式简单易上手，而且高大上，推荐使用。
需要解释下我的结构， #upload-input-file 的input标签是真实的文件上传按钮，包裹form标签后可以实现上传功能， #upload-input-btn 的button标签是展示给用户的按钮，因为需要样式的美化。上传完成生成的文件名将会显示在 .upload-file-result 里面， .progress 是进度条的位置，先让他隐藏加上 hidden 的class， .progress-bar 是进度条的主体， .progress-bar-status 是进度条的文本提醒。
去掉hidden的class，看到的效果是这样的
[图片上传失败...(image-2c700a-1548557865446)]
将上传事件绑定在file的input里面，绑定方式就随意了。
var progress = $(".progress-bar"), status = $(".progress-bar-status"), percentVal = '0%'; //上传步骤 $("#myupload").ajaxSubmit({ url: uploadUrl, type: "POST", dataType: 'json', beforeSend: function () { $(".progress").removeClass("hidden"); progress.width(percentVal); status.html(percentVal); }, uploadProgress: function (event, position, total, percentComplete) { percentVal = percentComplete + '%'; progress.width(percentVal); status.html(percentVal); console.log(percentVal, position, total); }, success: function (result) { percentVal = '100%'; progress.width(percentVal); status.html(percentVal); //获取上传文件信息 uploadFileResult.push(result); // console.log(uploadFileResult); $(".upload-file-result").html(result.name); $("#upload-input-file").val(''); }, error: function (XMLHttpRequest, textStatus, errorThrown) { console.log(errorThrown); $(".upload-file-result").empty(); } });
[图片上传失败...(image-3d6ae0-1548557865446)]
[图片上传失败...(image-9f0adf-1548557865446)]
更多用法可以 参考官网