Beispiel einer Funktion zum Hochladen mehrerer Bilder, die vom Laravel-Framework + Blob implementiert wird

In diesem Artikel wird hauptsächlich die vom Laravel-Framework + Blob implementierte Funktion zum Hochladen mehrerer Bilder vorgestellt. Er analysiert detailliert die Front-End-Übermittlungs- und Hintergrundverarbeitungsfunktionen des Laravel-Frameworks + Blob für Vorgänge zum Hochladen mehrerer Bilder in Form von Beispielen . Welche Erfahrungen haben Interessierte mit dem Laravel-Framework gemacht?

Dieser Artikel beschreibt die vom Laravel-Framework + Blob implementierte Funktion zum Hochladen mehrerer Bilder. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:

1. Einführung

Wir wissen, dass es im Allgemeinen zum Hochladen mehrerer Bilder kommt mit einer Sofortanzeigefunktion, d. h. Sie können das hochgeladene Bild sofort nach dem Hochladen sehen. Ein Plug-in zum Hochladen mehrerer Bilder, das ich zuvor verwendet habe, besteht darin, ein Bild auszuwählen, auf Hochladen zu klicken und die Bildressourcen auf den Server hochzuladen und dann die gespeicherten Pfadinformationen zurückzugeben. Schließlich klicken wir auf die Schaltfläche „Senden“ des Formulars Fügen Sie diese Informationen in die Datendatenbank ein .

Jetzt gibt es eine peinliche Sache. Nachdem ich auf das Hochladen des Bildes geklickt habe, habe ich die Formularübermittlung erneut abgebrochen. Allerdings wurden die Bildressourcen bereits an den Server gesendet, was leicht zu Platzverschwendung führen kann.

Jetzt bieten wir einen von uns geschriebenen Multi-Image-Upload in Kombination mit dem Laravel-Framework an (natürlich kann er überall direkt angewendet werden). Die Funktion ist: Das Bild kann sofort nach dem Hochladen angezeigt werden, ist es aber Wird vom Browser zwischengespeichert, der über Blob aufgerufen wird. Bildinformationen. Wenn das Formular gesendet wird, werden die Bildressourcen tatsächlich auf den Server und die Datenbank hochgeladen.

2. Frontend

Hinweis: Dieses Beispiel basiert auf dem Laravel-Framework

Geben Sie zuerst das Formularformular ein

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

JS-Code:

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

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

Das oben Genannte ist alles Ich hoffe, dass der Inhalt dieses Artikels für das Studium aller hilfreich sein wird!

Verwandte Empfehlungen:

Eine Docker-basierte Laravel-Anwendung von Grund auf erstellen

Sieben sehr nützliche Carbon-Methoden in Laravel

Probleme beim Einrichten von Lazy Loading während der Laravel Service Provider-Entwicklung

Das obige ist der detaillierte Inhalt vonBeispiel einer Funktion zum Hochladen mehrerer Bilder, die vom Laravel-Framework + Blob implementiert wird. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!