Laravel 프레임워크 + Blob으로 구현된 다중 이미지 업로드 기능의 예

이 글에서는 Laravel 프레임워크 + Blob에서 구현한 다중 이미지 업로드 기능을 주로 소개합니다. 다중 이미지 업로드 작업을 위한 Laravel 프레임워크 + Blob의 프런트엔드 제출 및 백그라운드 처리 관련 작업 기술을 예제 형식으로 자세히 분석합니다. . Laravel 프레임워크에 관심이 있는 분들은 이 글을 참고하세요

본 글의 예시는 Laravel 프레임워크 + Blob으로 구현된 다중 이미지 업로드 기능을 설명합니다. 참조를 위해 모든 사람과 공유하세요. 세부 사항은 다음과 같습니다.

1. 소개

다중 이미지 업로드에는 일반적으로 인스턴트 표시 기능이 함께 제공된다는 것을 알고 있습니다. 즉, 업로드된 이미지를 즉시 볼 수 있습니다. 업로드 후. 이전에 사용했던 다중 이미지 업로드 플러그인은 이미지를 선택하고 업로드를 클릭하여 이미지 리소스를 서버에 업로드한 다음 저장된 경로 정보를 반환하는 것입니다. 마지막으로 양식의 제출 버튼을 클릭합니다. 이 정보를 데이터 라이브러리에 삽입하십시오. 지금 당황스러운 점이 있습니다. 사진 업로드를 클릭한 후 다시 양식 제출을 취소했습니다. 하지만 이미지 리소스가 이미 서버로 전송되어 있어 공간 낭비가 발생하기 쉽습니다.

이제 Laravel 프레임워크와 결합하여 직접 작성한 다중 이미지 업로드를 제공합니다(물론 어디에서나 직접 적용 가능). 기능은 업로드 후 즉시 이미지를 표시할 수 있지만 브라우저는 이미지 정보를 캐시합니다. 양식이 제출된 후 이미지 리소스가 실제로 서버와 데이터베이스에 업로드됩니다.

2. 프런트엔드 참고: 이 예는 Laravel 프레임워크를 기반으로 합니다.

먼저 양식에 입력하세요.

<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 코드:

<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. 백그라운드 처리 코드

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

그건 이 글의 모든 내용이 모든 분들의 공부에 도움이 되었으면 좋겠습니다!

관련 권장 사항:

Docker를 기반으로 처음부터 Laravel 애플리케이션 구축

Laravel의 매우 유용한 7가지 Carbon 메소드

지연 로딩 설정 시 발생하는 Laravel 서비스 공급자 개발 문제

위 내용은 Laravel 프레임워크 + Blob으로 구현된 다중 이미지 업로드 기능의 예의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!