Introduction to uploading large files using tp5+layui

First record some configuration information to change the file upload size.

Open php.ini

file_uploads = ON // Whether to allow the switch to upload files through http, and turn on the path of

# UPLOAD_TMP_DIR // Temporary files

UPLOAD_MAX_FILESIZE 20M // The maximum value of the file to be uploaded

#post_max_size 22M //The size that can be uploaded through form POST

max_execution_time 600 //The maximum time a single PHP page is allowed to run

max_input_time 600 //The maximum time required for a single PHP page to receive data Time, default is 60 seconds

memory_limit 256M //The maximum memory that can be occupied during the execution of a single PHP page, the default is 8M

You can adjust the allowed file upload by changing the above configuration size. (Some also need to adjust some server configurations)

Supplement: 413 error If the server is nginx, you need to change the client_max_body_size 24M in the configuration nginx_conf and set the maximum value for receiving packets sent by the client. Remember to put it in http, restart the server, use restart, don't use reload.

Then start to realize the split upload of files.

File Select the file to upload through the file of the HTML input tag. Through H5 new object FileReader. Just like the literal meaning, the FileRaeder object is an object that reads local files. The FileReader object can read local files and return them in base64 encoding. (For specific information on the use of FileReader objects, please refer to Baidu, or read the following blog post, which is very specific.

Actual development

First attempt

Select the file through the input file tag

Use the FileReader object to read the file

Send the base64 encoding of the file to the server asynchronously through ajax

The server receives The encoding is then decoded and saved to the file.

The test result fails. When the file is too large, the length of the encoding is also longer. The maximum online parameter submission through asynchronous ajax is 8000 bytes.

Second attempt

Split and upload the obtained base64 encoding based on the first attempt

Divide the obtained base64 encoded string into several parts and perform Number, call ajax in a loop to send

After receiving the data, the server will decode the data and name it with the number

After receiving all the small files, call the background method to merge the small files

The test result failed. When the uploaded file exceeded 1G, the browser crashed. It should be that when reading the file, the file was too large, and the base64 encoding returned by the one-time read was too large, causing the page to crash.

Third attempt

Based on the second attempt, I also thought of reading in batches during the process of reading files to obtain encodings to avoid page crashes caused by reading too large files at once. .

Here we need to use H5's file.slice() to divide the file into chunks, so as to achieve batch reading and batch uploading.

Read the file through the FlieReader object Kuai

Asynchronously send the base64 encoding to the server through ajax

The server receives the data for decoding and file saving

The test was successful and the test uploaded a 4G file.

(Because the file is segmented, a large number of ajax requests will be initiated when uploading large files, resulting in a large amount of concurrency, which may cause the page to crash again. That’s why I used staggered requests. Slow down The speed of generating ajax requests.)

Specific implementation code

Next post some code

Front-end framework: layui

Back-end framework: tp5

Page code:

<div class="layui-form-item">
    <label class="layui-form-label">视频上传</label>
    <div class="layui-input-block layui-upload-video-btn">
        <ul>
            <li class="img-upload">
                <label></label>
                <input type="file" class="video-upload-file layui-upload-video-file-btn" name="file"/>
                <video width="320" height="240" controls style="display: none">
                    <source src="" type="video/mp4">
                    <source src="" type="video/ogg">
                    您的浏览器不支持Video标签。
                </video>
                <span style="display: none">X</span>
                <input type="hidden" class="video-link-id" name="video_link_id" value="">
            </li>
            <li>//视频上传会比较久(上传完会有提示)</li>
        </ul>
    </div>
</div>

js code:

$('.video-upload-file').on('change',function(){
        layer.msg('正在提交视频......');
        //隐藏按钮，显示进度条
        $('.layui-upload-video').hide();
        $('.layui-progress-ads').show();
        var loads_video = layer.load(2,{shade: [0.2, '#3a3535']});      //产生加载圈，禁止用户其他操作
        var thisFile = $(this);
        var reader=new FileReader();
        var file_size = this.files[0].size;     //文件大小
        var limit = 8388608;        //每次读取文件的大小
        // var limit = 1048000;        //每次读取文件的大小
        var up_count = Math.ceil(file_size/limit);     //总上传次数
        var type = this.files[0].type.substr(this.files[0].type.indexOf('/')+1);   //文件类型
        var success_num = 0;        //用于存放上传成功的数据的id
        var check = 1;             //防止多次合并
        console.log('文件大小：'+this.files[0].size);
        console.log('文件类型：'+type);
        console.log('分割上传次数：'+up_count);
        //分段读取文件
        readFile(this.files[0], 0, limit);
        function readFile(file, num, limit){
            // console.log('第'+num+'次:'+num*limit);
            reader.readAsDataURL(file.slice(num*limit, (num+1)*limit));
            reader.onload = function(e){
                console.log(reader.result.length);
                console.log(reader.result);
                //异步base64的数据传输到服务器
                ajax_way(reader.result, name, num+1, thisFile);
                if((num+1)*limit <= file_size){
                    readFile(file, num+1, limit);
                }
            }
        }
        function ajax_way(data,name,num, thisFile){
            //避免一次性生成太多的请求
            if(num+1 > 60){
                // console.log(&#39;等待两秒&#39;);
                sleep(6000);
                // console.log(&#39;等待结束&#39;);
            }
            $.ajax({
                url: "<?= url(&#39;admin/video/up_mfile&#39;);?>",
                type: "POST",
                data: {video:data,name:name,num:num},
                // async:false,      //是否采用同步，串行发送请求
                success: function (data) {
                    if(data.code == 1){
                        //上传成功，成功次数加一
                        success_num++;
                        console.log(num+&#39;完成&#39;);
                        console.log(&#39;已完成：&#39;+success_num+&#39;/&#39;+up_count);
                        //计算完成的百分比
                        var precentage = Math.ceil((success_num/up_count)*100);
                        //更改进度条显示
                        $(&#39;.layui-progress-ads-btn&#39;).attr(&#39;lay-percent&#39;, precentage+&#39;%&#39;);
                        $(&#39;.layui-progress-ads-btn&#39;).css(&#39;width&#39;, precentage+&#39;%&#39;);
                        $(&#39;.layui-progress-text&#39;).html(precentage+&#39;%&#39;);
                        //如果分割文件都上传了则调用接口合并文件
                        if(success_num == up_count && check == 1){
                            check = 0;
                            success_num = 0;
                            merge_mfile(name, up_count, thisFile, type);
                        }
                    }
                },
                error:function(e){
                    console.log(&#39;出错了:&#39;+num);
                    //传输出错则重新上传
                    ajax_way(data, name, num, thisFile);
                }
            });
        }

        //合并文件
        function merge_mfile(name, count, thisFile, type){
            $.ajax({
                url:"<?= url(&#39;admin/video/merge_mfile&#39;);?>",
                data:{name:name, count:count, type:type},
                type:"POST",
                success:function(data){
                    if (data.code==1){
                        layer.close(loads_video);
                        layer.msg(&#39;视频提交成功&#39;);
                        thisFile.siblings(&#39;.video-link-id&#39;).val(data.data);
                    }else{
                        layer.msg(&#39;视频提交异常请重新提交&#39;);
                        //显示按钮，隐藏进度条
                        $(&#39;.layui-upload-video&#39;).show();
                        $(&#39;.layui-progress-ads&#39;).hide();
                        //将进度条置零
                        $(&#39;.layui-progress-ads-btn&#39;).attr(&#39;lay-percent&#39;, &#39;0%&#39;);
                        $(&#39;.layui-progress-ads-btn&#39;).css(&#39;width&#39;, &#39;0%&#39;);
                        $(&#39;.layui-progress-text&#39;).html(&#39;0%&#39;);
                        //清空已选中的文件
                        var file = $(".layui-upload-video-file-btn");
                        file.after(file.clone().val(""));
                        file.remove();
                    }
                }
            })
        }
        function sleep(n) { //n表示的毫秒数
            var start = new Date().getTime();
            while (true) if (new Date().getTime() - start > n) break;
        }
        return false;
    });

For more layui knowledge, please pay attention to the layui usage tutorial column.

The above is the detailed content of Introduction to uploading large files using tp5+layui. For more information, please follow other related articles on the PHP Chinese website!