代码拉取完成,页面将自动刷新
同步操作将从 luke/webupload 强制同步,此操作会覆盖自 Fork 仓库以来所做的任何修改,且无法恢复!!!
确定后同步将在后台操作,完成时将刷新页面,请耐心等待。
整合webuploader+springboot+layui技术做的大文件分片上传,支持断点续传,解决前端大文件上传卡死,浏览器崩溃的问题,前端基于layui+webupload封装了一个layWebupload组件,欢迎使用 vue版的插件: https://gitee.com/hhjNavy/webupload-vue.git ,思路基本一样,只是写法略有差别
案例在static/webupload/layWebuploadDemo.html,后端源码在src/main/java在面,前端插件源码封装在static/webupload/layui_exts/webupload/layWebupload.js 可以自己参考一下
var domain=window.location.protocol+"//"+window.location.host;
layui.config({
base: domain+'/webupload/layui_exts'
}).extend({
layWebupload: '/webupload/layWebupload'
});
layui.use(['table','layWebupload'], function(){
var table = layui.table;
var layWebupload=layui.layWebupload;
var layWebuploadIns;
var url=domain+"/upload/fileRecord/"
console.log("layWebupload:",layWebupload)
//第一个实例
table.render({
elem: '#fileList'
,method:"post"
// ,height: 312
,url: url+'getList' //数据接口
,page: true //开启分页
,cols: [[ //表头
{field: 'id', title: 'ID'}
,{field: 'orgName', title: '原文件名' }
,{field: 'serverLocalName', title: '系统文件名'}
,{field: 'serverLocalPath', title: '服务存储路径'}
,{field: 'networkPath', title: '网络访问地址',templet:function (d) {
return domain+d.networkPath;
}}
,{field: 'uploadType', title: '上传类型',templet:function (d) {
return d.uploadType==1?'普通文件':'用户头像';
}}
,{field: 'md5Value', title: '文件MD5'}
,{field: 'fileSize', title: '文件大小',templet:function (d) {
return formatFileSize(d.fileSize);
}}
,{field: 'uploadDevice', title: '设备信息'}
,{field: 'uploadIp', title: '设备IP'}
,{field: 'createTime', title: '上传日期'}
]]
, request: {
pageName: 'page' //页码的参数名称,默认:page
,limitName: 'size' //每页数据量的参数名,默认:limit
}
,response: {
statusCode: 10000 //规定成功的状态码,默认:0
}
,parseData:function(res){ //res 即为原始返回的数据
return {
"code": res.code, //解析接口状态
"msg": res.message, //解析提示文本
"count": res.data.total, //解析数据长度
"data": res.data.rows //解析数据列表
};
}
,page: true
,limits: [10, 20, 30, 50, 100,200]
,limit: 10
});
$("#uploadFileBtn").click(function () {//重点
var fileType=''
//常见图片
fileType+="gif,png,jpeg,jpg";
//常见的视频
fileType+="cd,wave,aife,mpeg,mp3,mpeg-4,midi,wma,realaudio,vqf,oggvorbis,amr,ape,flac,aac";
//常见音频
fileType+=",avi,mov,rmvb,rm,flv,mp4,3gpavi,mov,3gp"
layWebuploadIns=layWebupload.render({
url: url+'/zone/upload',//上传文件服务器地址,必填
fileCheckUrl:url+'/zone/upload/md5Check',//文件校验地址
checkChunkUrl:url+'/zone/upload/md5Check',//文件块校验地址
mergeChunksUrl:url+'/zone/upload/merge/',//文件合并地址
size:5*1024*1024*1024,//单个文件大小,有默认值,可不填
fileType:fileType,//允许上传文件格式,有默认值,可不填
fileBoxEle:"#file_table_box",//上传容器
fileNumLimit:500,//上限500个文件
// headers:{//headers参数传递,根据自己需要添加
// Authorization:new Date().getTime()
// }
});
openEditPanel("文件上传","webupload_box")
});
/**
* 获取实例中上传数据
***/
$("#getUploadFileDataBtn").click(function () {
if(layWebuploadIns!=null&&layWebuploadIns!=undefined){
var nowData=layWebuploadIns.getData();
layer.msg("已经在控制台打印了,请按F12查看");
console.log("当前实例中数据:",nowData)
}else{
layer.msg("没有上传文件,请先上传文件");
}
});
$("#printUploadFileDataBtn").click(function () {
if(layWebuploadIns!=null&&layWebuploadIns!=undefined){
var nowData=layWebuploadIns.getData();
layer.msg("已经在控制台打印了,请按F12查看");
console.log("当前实例中数据:",nowData)
}else{
layer.msg("没有上传文件,请先上传文件");
}
});
function formatFileSize(size){
var fileSize =0;
if(size/1024>1024){
var len = size/1024/1024;
fileSize = len.toFixed(2) +"MB";
}else if(size/1024/1024>1024){
var len = size/1024/1024;
fileSize = len.toFixed(2)+"GB";
}else{
var len = size/1024;
fileSize = len.toFixed(2)+"KB";
}
return fileSize;
};
/**
* 弹窗面板
*/
function openEditPanel(title,modelId,w,h) {
if (title == null || title == '') {
title = false;
}
;
if (w == null || w == '') {
w=600;
}
;
if (h == null || h == '') {
h='auto';
}else{
h=h+"px";
}
;
var index =layer.open({
type: 1,
area: [w + 'px', h],
fix: false,
maxmin: true,
shadeClose: false,
zIndex:50,
shade: 0.4,
title: title,
content: $("#"+modelId)
});
return index;
}
})
本人是一个后台开发的,前端写得不到位的地方,请多多指教
使用过程中,遇到问题,请发邮件1573028099@qq.com或者加QQ1573028099,上班期间勿扰,谢谢
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。