Introduction au téléchargement de fichiers volumineux à l'aide de tp5+layui

Enregistrez d'abord quelques informations de configuration pour modifier la taille de téléchargement du fichier.

Ouvrez php.ini

file_uploads = on //Commutateur pour autoriser le téléchargement de fichiers via HTTP, activé par défaut

upload_tmp_dir     //Le chemin de stockage temporaire des fichiers

upload_max_filesize 20M                                  >post_max_size 22M //La taille qui peut être téléchargé via le formulaire POST

max_execution_time　600 / /La durée maximale d'exécution d'une seule page PHP

max_input_time 600 //Le temps requis pour qu'une seule page PHP reçoive les données Durée maximale, la valeur par défaut est de 60 secondes

memory_limit 256M / /La mémoire maximale pouvant être occupée par une seule page PHP lors de l'exécution, la valeur par défaut est 8M

Vous pouvez ajuster le téléchargement de fichier autorisé en modifiant la taille de configuration ci-dessus. (Certains doivent également ajuster certaines configurations du serveur)

Supplémentaire : erreur 413 Si le serveur est nginx, vous devez modifier le client_max_body_size 24M dans la configuration nginx_conf et définir la valeur maximale de réception des paquets envoyés par le client. N'oubliez pas de le mettre en http, de redémarrer le serveur, d'utiliser le redémarrage, de ne pas utiliser de rechargement.

Ensuite, démarrez le téléchargement fractionné des fichiers.

Le fichier est téléchargé via la balise d'entrée de fichier HTML. Grâce au nouvel objet FileReader H5. Tout comme le sens littéral, l'objet FileRaeder est un objet qui lit les fichiers locaux. L'objet FileReader peut lire des fichiers locaux et les renvoyer en codage base64. (Pour des informations spécifiques sur l'utilisation des objets FileReader, veuillez vous référer à Baidu ou lire le billet de blog suivant, qui est très spécifique.

Développement réel

Première tentative

Sélectionnez le fichier via la balise du fichier d'entrée

Utilisez l'objet FileReader pour lire le fichier

Envoyez de manière asynchrone l'encodage base64 du fichier au serveur via ajax

Le serveur le reçoit. L'encodage est ensuite décodé et enregistré dans le fichier.

Le résultat du test échoue. Lorsque le fichier est trop volumineux, la longueur maximale de l'encodage est plus longue. via ajax fait 8 000 octets.>

Deuxième tentative

Divisez et téléchargez l'encodage base64 obtenu sur la base de la première tentative

Divisez la chaîne d'encodage base64 obtenue en plusieurs parties et téléchargez le numéro, appelez. ajax en boucle pour envoyer

Après l'avoir reçu, le serveur décode les données et les nomme avec le numéro

Après avoir reçu tous les petits fichiers, appelez la méthode en arrière-plan pour fusionner les petits fichiers

Le résultat du test a échoué. Lorsque le fichier téléchargé dépassait 1G, le navigateur tombait en panne. Il se peut que lors de la lecture du fichier, le fichier soit trop volumineux et que l'encodage base64 renvoyé par la lecture unique soit trop volumineux. provoquant le crash de la page.

Troisième tentative

Sur la base de la deuxième tentative, j'ai également pensé à lire par lots pendant le processus de lecture des fichiers pour obtenir des encodages afin d'éviter les crashs de page causés par la lecture également. gros fichiers à la fois.

Ici, nous devons utiliser file.slice() de H5 pour diviser le fichier en lots afin de réaliser une lecture et un téléchargement par lots

Lire le fichier via l'objet FlieReader. Rapide

Envoyer de manière asynchrone l'encodage base64 au serveur via ajax

Le serveur reçoit les données pour le décodage et la sauvegarde des fichiers

Le test a réussi et le test a téléchargé une 4G rapide file. 🎜>

(Le fichier étant segmenté, un grand nombre de requêtes ajax seront lancées lors du téléchargement de fichiers volumineux, ce qui entraînera une grande quantité de concurrence, ce qui peut provoquer un nouveau crash de la page. C'est pourquoi j'ai utilisé un fichier échelonné. requêtes. Ralentir la vitesse de génération des requêtes ajax. )

Code d'implémentation spécifique

Ensuite, publiez du code

Front-end : layui

Framework back-end : tp5

Code de la page :

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

Code js :

$('.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;
    });

Pour plus de connaissances sur Layui, veuillez prêter attention au

Tutoriel d'utilisation de Layui

colonne

.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!