Thinkphp + Layui 的大文件带进度条的上传

提示：优美界面，直接能够用在生产当中的大文件上传代码

---

前言

提示：网络时代的变化，网速的加快，对于大文件的上传下载都有了更高的需求。但是，发现没有一个比较好看，讲解清晰的thinkphp 大文件上传的教程。

---

一、前端Layui 的上传模块实现

注：需要引入layui，如果要带进度条的话，layui的版本必须是2.5.5版本以上才能够支持。
使用layui的上次模块进行文件上传时，有一个弊端就是上传的文件一定不能超过php.ini中的单个文件上传大小的限制，如果超过了限制的大小则服务器端无法获取到上次的文件。

1、html代码

直接上代码：

<div class="wrap js-check-wrap">
        <div class="layui-upload" style="margin-top: 50px;">
            <div class="layui-card" style="height: 120px;padding: 20px;">
                
                <div class="xzwj">
                    <button type="button" class="layui-btn layui-btn-primary" id="test8">选择文件</button>
                </div>
                <div class="layui-progress" lay-filter="demo" lay-showPercent="yes"
                    style="width: 300px;margin: 30px 0 10px 0;">
                    <div class="layui-progress-bar" lay-percent="0%"></div>
                </div>
                <div>
                    <button style="display: none;" type="button" class="layui-btn" id="test9">开始上传</button>
                    <input type="hidden" name="">
                </div>
            </div>
        </div>
    </div>

2、JS代码

		var upload = '';
        var element = '';

        layui.use(['upload', 'element'], function () {
            upload = layui.upload;
            element = layui.element;

            //选完文件后不自动上传
            upload.render({
                elem: '#test8',
                url: '{:U("upload")}',
                auto: false,
                accept: 'video',
                exts: 'mp4',
                bindAction: '#test9',
                choose: function (obj) {
                    var name = $('.layui-upload-file').val();
                    $('.xzwj').append("<span style='padding-left:20px'>"+name+"</span>");
                    $('#test9').show();
                    element.progress('demo', '0%');
                },
                before: function (obj) {
                    layer.load(1, { shade: '#fff' });
                },
                progress: function (n, elem) {
                    var percent = n + '%' //获取进度百分比
                    element.progress('demo', percent); //可配合 layui 进度条元素使用
                },
                done: function (res) {
                    layer.closeAll();
                    layer.msg('上传成功');
                    $('#test9').hide();
                },
                error: function () {
                    console.log('上传失败');
                }
            });

        });

效果如下图：

3、PHP 代码

在thinkphp下的上传文件代码：

public function upload(){
	$upload = new \Think\Upload(); // 实例化上传类
	$upload->maxSize   =     314572800; // 设置附件上传大小
	$upload->exts      =     array('mp4'); // 设置附件上传类型
	$upload->rootPath  =     './Uploads/'; // 设置附件上传根目录
	$upload->savePath  =     ''; // 设置附件上传（子）目录
	// 上传文件 
	$info   =   $upload->upload();
	
	$pathinfo = $upload->rootPath .$info['savepath'].$info['savename'];
	
	if (!$info) { // 上传错误提示错误信息
		echo json_encode(['status'=>'201','info'=>$upload->getError()]);
	} else { // 上传成功
		echo json_encode(['status'=>'200','info'=>$pathinfo]);
	}
}

---

总结

总体来说，Layui的使用还是比较简单的，再加上PHP框架的加持，写一个上传功能用不了多复杂。但是layui没有进行分片上传的封装，目前只能是按照一个文件来上传，目前适合上传一些图片、小的文件、视频。对于大的视频、文件的话建议使用分片上传。下期来介绍一个分片上传的实例。