Analyse de l'exemple de fonction de téléchargement multi-images implémenté par le framework Laravel + Blob-tutoriel php-php.cn

Analyse de l'exemple de fonction de téléchargement multi-images implémenté par le framework Laravel + Blob

jacklove

Libérer： 2023-04-02 08:28:02

original

1862 Les gens l'ont consulté

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 plusieurs opérations de téléchargement d'images sous forme d'exemples. .Les amis qui en ont besoin peuvent Pour référence,

L'exemple de 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.

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

Copier après la connexion

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>

Copier après la connexion

3 .Code de traitement en arrière-plan

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

Copier après la connexion