Einführung in das Hochladen großer Dateien mit tp5+layui-Layui-Tutorial-php.cn

Einführung in das Hochladen großer Dateien mit tp5+layui

Erfassen Sie zunächst einige Konfigurationsinformationen, um die Datei-Upload-Größe zu ändern.

Öffnen Sie php.ini

file_uploads = on //Umschalten, um das Hochladen von Dateien über HTTP zuzulassen, standardmäßig aktiviert

upload_tmp_dir //Der Pfad für die temporäre Dateispeicherung

upload_max_filesize 20M >post_max_size 22M //Die Größe, die über das Formular POST hochgeladen werden kann

max_execution_time　600 / /Die maximale Zeit, die eine einzelne PHP-Seite ausgeführt werden darf

max_input_time 600 //Die Zeit, die eine einzelne PHP-Seite benötigt, um Daten zu empfangen. Maximale Zeit, der Standardwert ist 60 Sekunden

memory_limit 256M / /Der maximale Speicher, der während der Ausführung einer einzelnen PHP-Seite belegt werden kann, der Standardwert ist 8M

Sie können den zulässigen Datei-Upload anpassen, indem Sie die obige Konfigurationsgröße ändern. (Einige müssen auch einige Serverkonfigurationen anpassen)

Zusätzlich: 413-Fehler Wenn der Server Nginx ist, müssen Sie client_max_body_size 24M in der Konfiguration nginx_conf ändern und den Maximalwert für den Empfang der vom Client gesendeten Pakete festlegen. Denken Sie daran, es in http einzugeben, den Server neu zu starten, Neustart zu verwenden und nicht Neuladen zu verwenden.

Starten Sie dann den geteilten Upload der Dateien.

Die Datei wird über das Dateieingabe-Tag von HTML hochgeladen. Durch H5 neues Objekt FileReader. Genau wie die wörtliche Bedeutung ist das FileRaeder-Objekt ein Objekt, das lokale Dateien liest. Das FileReader-Objekt kann lokale Dateien lesen und sie in Base64-Kodierung zurückgeben. (Für spezifische Details zur Verwendung von FileReader-Objekten gehen Sie bitte zu Baidu oder lesen Sie den folgenden Blog-Beitrag, der sehr spezifisch ist.

Tatsächliche Entwicklung

Erster Versuch

Wählen Sie die Datei über das Eingabedatei-Tag aus

Verwenden Sie das FileReader-Objekt, um die Datei zu lesen

Senden Sie die Base64-Codierung der Datei asynchron über Ajax an den Server

Der Server empfängt die Kodierung und speichert sie in der Datei.

Wenn die Datei zu groß ist, ist die Länge der Kodierung über Ajax länger ist 8000 Bytes. >

Zweiter Versuch

Teilen Sie die erhaltene Base64-Kodierung basierend auf dem ersten Versuch auf und laden Sie sie hoch

Teilen Sie die erhaltene Base64-kodierte Zeichenfolge in mehrere Teile und laden Sie die Nummer hoch, rufen Sie Ajax auf eine Schleife zum Senden

Nach dem Empfang dekodiert der Server die Daten und benennt sie mit der Nummer

Nachdem alle kleinen Dateien empfangen wurden, rufen Sie die Hintergrundmethode auf, um die kleinen Dateien zusammenzuführen

Das Testergebnis schlug fehl. Als die hochgeladene Datei 1 GB überschritt, stürzte der Browser ab. Beim Lesen der Datei war die Datei möglicherweise zu groß und die beim einmaligen Lesen zurückgegebene Base64-Kodierung war zu groß Die Seite stürzt ab.

Dritter Versuch

Basierend auf dem zweiten Versuch dachte ich auch daran, während des Lesevorgangs Dateien stapelweise einzulesen, um Kodierungen zu erhalten, um Seitenabstürze zu vermeiden, die durch zu große Lesevorgänge verursacht werden Dateien auf einmal.

Hier müssen wir file.slice() verwenden, um die Datei stapelweise zu lesen und hochzuladen

Base64-Kodierung asynchron über Ajax an den Server senden

Der Server empfängt die Daten zur Dekodierung und Dateispeicherung

Der Test war erfolgreich und der Test hat eine schnelle 4G-Datei hochgeladen (Da die Datei segmentiert ist, wird beim Hochladen großer Dateien eine große Anzahl von Ajax-Anfragen initiiert, was zu einer großen Parallelität führt und möglicherweise erneut zum Absturz der Seite führt. Aus diesem Grund habe ich gestaffelt verwendet Anfragen. Verlangsamen Sie die Geschwindigkeit der Generierung von Ajax-Anfragen. )

Spezifischer Implementierungscode

Veröffentlichen Sie als Nächstes etwas Code

Front-End-Framework:layui

Back-End-Framework: tp5

Seitencode:

<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>

Nach dem Login kopieren

js-Code:

$(&#39;.video-upload-file&#39;).on(&#39;change&#39;,function(){
        layer.msg(&#39;正在提交视频......&#39;);
        //隐藏按钮，显示进度条
        $(&#39;.layui-upload-video&#39;).hide();
        $(&#39;.layui-progress-ads&#39;).show();
        var loads_video = layer.load(2,{shade: [0.2, &#39;#3a3535&#39;]});      //产生加载圈，禁止用户其他操作
        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(&#39;/&#39;)+1);   //文件类型
        var success_num = 0;        //用于存放上传成功的数据的id
        var check = 1;             //防止多次合并
        console.log(&#39;文件大小：&#39;+this.files[0].size);
        console.log(&#39;文件类型：&#39;+type);
        console.log(&#39;分割上传次数：&#39;+up_count);
        //分段读取文件
        readFile(this.files[0], 0, limit);
        function readFile(file, num, limit){
            // console.log(&#39;第&#39;+num+&#39;次:&#39;+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;
    });

Nach dem Login kopieren

Für weitere Laui-Kenntnisse beachten Sie bitte das

Tutorial zur Verwendung von Laui

Spalte

Das obige ist der detaillierte Inhalt vonEinführung in das Hochladen großer Dateien mit tp5+layui. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!