Laravel+Layer实现图片上传功能(整理篇)

♩ 背景

昨天在自己的 Laravel5.5 框架项目中，希望集成 Layer 的图片上传功能 但是在 ajax（POST） 提交请求时，一直显示 500 报错

 ♪ 分析

⒈ 问题所在

最后将核心代码摘出，放到 Larvel 框架以外运行，发现代码是没有问题的，因为对 Laravel 框架接触的太浅，忽视了 CSRF 的限制

⒉ 解决方案

一般在表单提交时，都会存放一个隐藏的输入框

<input type="hidden" name="_token" value="<?php echo csrf_token(); ?>">

或者在需要提交的表单中补充一行代码：

<form method="POST" action="/profile"> {{ csrf_field() }} ...</form>

但是，在比较单一的元素进行 ajax 提交时，建议可使用如下的方法

①. 页面中添加隐藏域

<input type="hidden" name="_token" class="tag_token" value="<?php echo csrf_token(); ?>">

②. ajax 请求前，先获取 csrf_token() 值

var tag_token = $(".tag_token").val();

③. ajax 请求时，将该值作为数据的一部分传输过去，例如：

data:{'_token':tag_token}

♫ 实现步骤

 ⒈ 源文件目录

⒉ 前端准备

页面引入layui 的 css 和 js 文件

<script type="text/javascript" src="layui/layui.js"></script><script src="https://code.jquery.com/jquery-3.2.1.min.js"></script><link rel="stylesheet" type="text/css" href="layui/css/layui.css" rel="external nofollow" />

注： 本人下载的 layui 框架源码包为 layui-v2.2.45

核心代码：

<div class="layui-form-item"> <div class="layui-upload">   <button type="button" name="img_upload" class="layui-btn btn_upload_img">  <i class="layui-icon"></i>上传图片  </button>  <img class="layui-upload-img img-upload-view" src="upload/dog.jpg">  <p id="demoText"></p> </div> </div>

js 代码：

<script type="text/javascript"> layui.use('upload', function(){ var upload = layui.upload; var tag_token = $(".tag_token").val(); //普通图片上传 var uploadInst = upload.render({  elem: '.btn_upload_img'  ,type : 'images'  ,exts: 'jpg|png|gif' //设置一些后缀，用于演示前端验证和后端的验证  //,auto:false //选择图片后是否直接上传  //,accept:'images' //上传文件类型  ,url: 'upload.php'  ,data:{'_token':tag_token}  ,before: function(obj){  //预读本地文件示例，不支持ie8  obj.preview(function(index, file, result){   $('.img-upload-view').attr('src', result); //图片链接（base64）  });  }  ,done: function(res){  //如果上传失败  if(res.status == 1){   return layer.msg('上传成功');  }else{//上传成功   layer.msg(res.message);  }  }  ,error: function(){  //演示失败状态，并实现重传  return layer.msg('上传失败,请重新上传');  } }); });</script>