layui upload 分块上传实现
由于项目需要上传超大文件，当然现在的条件好了，1-3百M的文件没多大问题，但是超过1G的还是有问题的。（当然oss单个文件最高可以5g）对于大额文件上传存在上传缓慢甚至失败的问题
所有研究了一下layui怎么实现分块上传（layui没有提供，不过大部分需求满足所有，还有各家的云储存减少一定需求）。
实现逻辑就是利用ajax技术做循环提交文件。
先把文件对象（二进制）分割成多分，然后分多次提交
后端接受后，在合成一个完整的文件。大致流程如此，实现的方式有差异
前端代码：（哈哈，半吊子前端，也是参考别人的）
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>layui</title> <meta name="renderer" content="webkit"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 --> <?php include get_theme_path() . 'commom/head.php' ?> <style> .layui-progress { position: fixed; width: 300px; left: 50%; margin-left: -150px; top: 200px; height: 18px; border-radius: 10px; background: #fff; z-index: 99999999; overflow: hidden; display: none; } </style> </head> <body> <form class="layui-form" method="post" action=""> <input type="hidden" name="form_submit" value="ok"/> <div class="layui-form-item"> <label class="layui-form-label">选择文件：</label> <div class="layui-input-block"> <button type="button" class="layui-btn" id="file"><i class="layui-icon"></i>上传文件</button> </div> </div> <div class="layui-form-item"> <label class="layui-form-label">文件名：</label> <div class="layui-input-block"> <input type="text" name="name" id="name" value="" lay-verify="title" autocomplete="off" readonly="true" class="layui-input"> </div> </div> <div class="layui-form-item layui-form-text"> <label class="layui-form-label">文件地址：</label> <div class="layui-input-block"> <input type="text" name="path" id="path" value="" lay-verify="path" autocomplete="off" readonly="true" placeholder="" class="layui-input"> </div> </div> <div class="layui-form-item"> <div class="layui-input-block"> <button class="layui-btn" lay-submit="" lay-filter="submit">立即提交</button> <button type="reset" class="layui-btn layui-btn-primary">重置</button> </div> </div> </form> <div class="layui-progress layui-progress-big" lay-showpercent="true" lay-filter="Progress"> <div class="layui-progress-bar layui-bg-blue" lay-percent="0%"></div> </div> <!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 --> <?php include get_theme_path() . 'commom/foot.php' ?> <script> layui.use(['form', 'upload', 'element'], function () { let form = layui.form , upload = layui.upload , element = layui.element , $ = layui.jquery; let number, status, size, totalNum;// number控制数量,status状态,size 文件大小 totalNum总数 upload.render({ elem: '#file', url: apiDomain + '/test/file', //处理上传文件接口 accept: 'file', auto: false, choose: function (obj) { layer.load(1,{shade: 0.3}); element.progress('Progress', '0%'); $('.layui-progress').show(); let data = this.data;//请求上传接口的额外参数 // let files = obj.pushFile(); let LENGTH = 1024 * 1024 * 5; //每片文件大小 obj.preview(function (index, file, result) { size = file.size; totalNum = Math.ceil(size / LENGTH); number = 1;//初始化 status = 1;//初始化 1开始 let fileName = file.name; $('#name').val(fileName); let fileExt = fileName.substring(fileName.lastIndexOf('.') + 1); // let uuidFileName = fileName.substring(0, fileName.lastIndexOf('.')); let uuidFileName = ''//前端自己实现唯一或者后端实现就不用传参， let progress = setInterval(function () { if (totalNum === number && (status === 2 || status === -1)) {//当总数和分片数相等 clearInterval(progress);//结束循环 } else { if (status === 1) { status = 0;//改为0避免直接循环 一次循环一次返回结果避免异步或者后置 data.fileName = uuidFileName; data.number = number; data.totalNum = totalNum; data.fileExt = fileExt; data.type = file.type; let blob = file.slice((number - 1) * LENGTH, number * LENGTH)//分割file(二进制blob)对象，但类似分页找到目标blob对象 obj.upload(index, blob); } } }, 100); }); }, done: function (res) { if (res.code === 100) { element.progress('Progress', Math.ceil(number * 100 / totalNum) + '%');//计算进度条 number = number + 1; status = 1;//分片成功修改状态 } else if (res.code === 200) { //上传完成 element.progress('Progress', '100%'); status = 2; $('#path').val(res.upload); layer.closeAll('loading'); //关闭loading layer.msg('上传成功', {time: 1000, anim: 0}, function () { $('.layui-progress').hide(); }); } else { //上传错误 status = -1; layer.closeAll('loading'); //关闭loading element.progress('Progress', '0%'); if (typeof (res.upload) == "undefined") { } else { $('#path').val(res.upload); } layer.msg("上传失败，请重试", {time: 1500, anim: 0}, function () { $('.layui-progress').hide(); }); } }, error: function () { $('.layui-progress').hide(); } }); }); </script> </body> </html>
可以用循环，for 来控制次数，也可以用递归 当然我这里用的 setInterval 定时器 更好些可以更好的控制
后端代码：
$code=100; // 用原生或者自己session实现 uuid自己实现或者原生（原生的有误差） if (empty(Session::get('fileUid'))){ $uuid = create_guid(); Session::set('fileUid',$uuid); } else { $uuid = Session::get('fileUid'); } //占位符 upload的目录路径自己选 $filename = sprintf('./upload/%s.%s',$uuid,$_POST['fileExt']); $data = file_get_contents($_FILES['file']['tmp_name']); if($_POST['number']==1){ file_put_contents($filename,$data);//先生成一个文件 } else { //其余文件追加到文件末尾 file_put_contents($filename,$data,FILE_APPEND); } //最后一片文件 if($_POST['totalNum']==$_POST['number']){ Session::delete('fileUid'); $code=200; } $res=['code'=>$code,'upload'=>$filename]; echo json_encode($res); }
