Laravel 프레임워크 + Blob으로 구현된 다중 이미지 업로드 기능 예제 분석-PHP 튜토리얼-php.cn

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

jacklove

풀어 주다： 2023-04-02 08:28:02

원래의

1853명이 탐색했습니다.

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

본 글의 예시는 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. 백그라운드 처리 code

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

로그인 후 복사