Exemple de fonction de téléchargement multi-images implémentée par le framework Laravel + Blob

Cet article présente principalement la fonction de téléchargement multi-images implémentée par Laravel framework + Blob. Il analyse en détail les compétences opérationnelles liées à la soumission frontale et au traitement en arrière-plan du framework Laravel + Blob pour les opérations de téléchargement multiples d'images sous forme d'exemples. . Quelle est l'expérience du framework Laravel ? Les amis intéressés peuvent se référer à cet article

Cet article décrit la fonction de téléchargement multi-images implémentée par le framework Laravel + Blob. Partagez-le avec tout le monde pour votre référence, les détails sont les suivants :

1 Introduction

Nous savons que les téléchargements multi-images surviennent généralement. avec une fonction d'affichage instantané, c'est-à-dire que vous pouvez voir l'image téléchargée immédiatement après le téléchargement. Un plug-in de téléchargement multi-images que j'ai utilisé auparavant consiste à sélectionner une image, à cliquer sur Télécharger et à télécharger les ressources d'image sur le serveur, puis à renvoyer les informations de chemin stockées. Enfin, nous cliquons sur le bouton Soumettre du formulaire. insérez ces informations dans la base de données de données .

Maintenant, il y a une chose embarrassante. Après avoir cliqué pour télécharger l'image, j'ai de nouveau annulé la soumission du formulaire. Cependant, les ressources d'image ont déjà été envoyées au serveur, ce qui peut facilement entraîner une perte d'espace.

Nous proposons désormais un téléchargement multi-images écrit par nous-mêmes combiné avec le framework Laravel (bien sûr, il peut être appliqué directement n'importe où). La fonctionnalité est la suivante : l'image peut être affichée immédiatement après le téléchargement, mais c'est le cas). mises en cache par le navigateur appelé via les informations sur l'image blob, lorsque le formulaire est soumis, les ressources d'image seront effectivement téléchargées sur le serveur et la base de données.

2. Front end

Remarque : Cet exemple est basé sur le framework Laravel

Entrez d'abord le formulaire Form

<form method="post" enctype="multipart/form-data" action="#">
  {{csrf_field()}}
  <ul class="list_btn">
  <li><img id="imgone" class="sz" width="100px" height="100px" src="" style="display: none;"></li>
   <li> <input type="file" id="house_img_one1" name="art_thumb" multiple="multiple" onchange="houseImgOne(this)"></li>
</ul>
  <p class="submit">上传</p>
</form>

Code JS :

<script>
  var _btnId = &#39;&#39;;
  var all_urls="";
  var all_types="";
  function houseImgOne(_this) {
    var img = &#39;<img class="sz" width="100px" height="100px" src=""  >&#39;
    _btnId = $(_this).attr(&#39;id&#39;);
    var obj = document.getElementById("house_img_one1");
    var length = obj.files.length;
    //多图上传时遍历文件信息（可以通过object.files查看）
    for (var i = 0; i < length; i++) {
      var objUrl = getObjectURL(_this.files[i]);
      //图片后缀类型拼接
      all_types=all_types+_this.files[i].type;
      //将图片转换成base64自字符
      var oFReader = new FileReader();
      oFReader.readAsDataURL(_this.files[i]);
      oFReader.onload = function (oFREvent) {
        all_urls=all_urls+oFREvent.target.result+"&|||"; //拼接data形式base64的url
      };
      if (objUrl) {
        $(&#39;.sz:last&#39;).before(img);
        $(&#39;.sz&#39;).eq($(".sz").length - 2).attr("src", objUrl);
      }
    }
  }
  //点击提交按钮触发ajax
    $(".submit").click(function(){
    //console.log(all_types);
    $.ajax({
      type:"post",
      url:"{{url(&#39;admin/img&#39;)}}",
      data:{&#39;imgs&#39;:all_urls,&#39;types&#39;:all_types,&#39;_token&#39;:"{{csrf_token()}}"},
      dataType:"json",
      success:function(data){
        if (data==1){
          // layer插件提示，可自行选择则
          layer.msg("上传成功", {icon: 6});
          window.location.reload();
        }else {
          alert("上传失败！");
        }
      }
    });
  });
  //获取blog对象url(实际获取的是缓存中的图片路径信息，用于即时显示，并非服务器返回的实际资源路径)
  function getObjectURL(file) {
    var url = null;
    if (window.createObjectURL != undefined) {
      url = window.createObjectURL(file);
    } else if (window.URL != undefined) {
      url = window.URL.createObjectURL(file);
    } else if (window.webkitURL != undefined) {
      url = window.webkitURL.createObjectURL(file);
    }
    return url;
  }
</script>

3. Code de traitement en arrière-plan

public function store(Request $request)
{
  $data=$request->all();
  $imgs = $data['imgs'];
  // array_values()用于重置数组下标
  $types =array_values(array_filter(explode('image/',$data['types'])));
  $arr=array_values(array_filter(explode('&|||',$imgs)));
  foreach ($arr as $k => $v){
  //文件路径
  $filepath = base_path().'/storage/app/imgs/'.date('YmdHis').$k.'.'.$types[$k];
  //提取base64字符
  $imgdata = substr($v,strpos($v,",") + 1);
  $decodedData = base64_decode($imgdata);
  file_put_contents($filepath,$decodedData );
  //插入数据库
  $img = new Img;
  $filepath = strchr($filepath,'/');
  $img->img_path=$filepath;
  $img->save();
}

Ce qui précède est tout. le contenu de cet article, j’espère qu’il sera utile à l’étude de chacun !

Recommandations associées :

Créer une application Laravel basée sur Docker à partir de zéro

Sept méthodes Carbon très utiles dans Laravel

Problèmes rencontrés lors de la configuration du chargement différé lors du développement du fournisseur de services Laravel

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!