laravel使用layui进行图片上传

       图片上传很多开发者都会遇到过，而一般为了用户体验性，我们图片上传都会做成无刷新提交，而最简单的是表单提交，但是用户体验性差，本篇博客就给大家介绍利用第三方插件layui实现图片无刷新提交。

       博主介绍的图片无刷新提交，其实也算是一种刷新提交，但是利用的是弹窗刷新(也就是子页面)，主页面不刷新，从而转移了刷新的主体。博主的思路是这样的，我们点提交图片，弹出一个弹窗，这个弹窗就是实现基本的上传图片，后端接收到图片保存并返回图片路径给前端，前端再点提交，从而实现无刷新提交图片。

      下面为大家介绍实现过程(记得先引用layui的JS跟Css文件,传送门layui)：

      一、先定义好我们的理由，代码如下(根据个人风格不同，路由格式也不同)：

Route::group(['prefix' => 'admin'], function () {
   //头像上传
   Route::post('blogUploadImg', 'Admin\UploadsController@blogUploadImg');
});

       二、先整理我们的前端页面，分为表单(提交主体)、图片提交弹窗(用于提交图片)，为了好看，我先弄一个img跟input控件，img先定义一张默认图片,用来显示待会上传的图片，而input控件属性是隐藏的，用来存放待会返回的图片地址，用于上传用，代码如下：

   

      头像
      

        
          
        
      
        
           
        
    
    

       
    

       然后我们再定义我们的弹出窗口，代码如下：

   

     

       
           

               
                 上传图片
               
               
           
       
     
   

       接下来就是JS提交部分了，这部分是用layui介绍的方法以及自己的代码，思路是这样的，我们将图片上传到后台接口中，后台接口接收到图片保存起来，并返回图片地址，AJAX接收到返回结果，将返回的地址替换掉img中的默认图片，返回的图片地址放在隐藏的input控件中，同时关掉弹出窗，代码如下：

       三、接下来是我们的接口代码，负责接收图片并保存图片，返回图片地址，如下：

public function blogUploadImg(Request $request)
{
   $file = $request->file('file');//获取图片
   $allowed_extensions = ["png", "jpg", "gif"];
   //图片是否是正规图片
   if ($file->getClientOriginalExtension()&&!in_array
   ($file->getClientOriginalExtension(),$allowed_extensions)) {
    $data=BaseServiceAdmin::returnAjaxData
    ('-1', '只能上传 png | jpg | gif格式的图片');
    return $data;
   }
   if($request->hasFile('photo')) {

   }
   //保存图片
   $destinationPath = 'uploads/blog/';
   $extension = $file->getClientOriginalExtension();
   $fileName = md5(str_random(10) . time()) . '.' . $extension;
   $file->move($destinationPath, $fileName);
   //记录日志
   BaseServiceAdmin::logInfo('uploadsImg', '【接收到的图片】' . $file 
   . '【上传后的图片地址】' . asset($destinationPath . $fileName), 'uploadImg');
   //返回地址
   $data = BaseServiceAdmin::returnAjaxData
   ('1', asset($destinationPath . $fileName));
   return $data;
}

       大家记得将我们这个方法的路由过滤掉，大家可以去看看之前关于CSRF验证的博客。   

       四、最后一步，就是提交表单，将此时提交图片获取到的地址保存到我们的数据库，这个代码就不贴出来了，大家根据自己的业务，自己弄，此时已经跟普通的提交字符串数据没什么区别了。

       以上就是利用layui图片上传插件实现的图片上传，这是最普通的做法，大家可以根据他们的API文档修改。本篇博客属于原创，如果引用请麻烦备注下原文链接，这也是对博主的一点尊重，谢谢。

       更多文章请关注微信公众号