laravel5.2+layui图片上传及VerifyCsrfToken报错问题的解决

自己的 Laravel5.2 框架项目中，希望集成 Layer 的图片上传功能但是在 ajax（POST）提交请求时，一直显示 500 报错，出现了VerifyCsrfToken报错问题的相关内容，享出来供大家参考学习
报错情况
在这里插入图片描述
原因
忽视了 CSRF 的限制，Laravel 推荐在全局注册 VerifyCsrfToken 的 Middleware ，对所有 Post,Put,Delete 请求自动校验是否带合法的 _csrf token。

解决方法
方法 1.在form表单中添加如下的隐藏域代码

<input type="hidden" name="_token" class="tag_token" value="{
   
   { csrf_token() }}" />

方法 2.在form表单中添加 csrf_field
(与上述解决方法功能一致)

{!! csrf_field() !!}

方法 3.注释 Kernel.php 代码
打开 app\Http\Kernel.php，在文件中注释掉下面的代码

\App\Http\Middleware\VerifyCsrfToken::class

方法 4. 修改handle()方法
打开 \app\Http\Middleware\VerifyCsrfToken.php，添加或修改 handle()方法如下：

public function handle($request, \Closure $next)
 {
  // 使用CSRF
  //return parent::handle($request, $next);
  // 禁用CSRF
  return $next($request);
 }

以上就是对VerifyCsrfToken报错问题的解决，

layui上传文件的使用:

在config/filesystems.php配置上传路径：uploads
在这里插入图片描述
这里简单解释下一些配置：
local:为本地空间; 默认是local ;
storage_path()指的是：文件保存在storage文件下的app;
public_path()指的是：文件保存在public文件下的uploads;
s3:是亚马逊的配置，可以忽略;

路由：

Route::any('student/uploads',['uses'=>'StudentController@uploads']);

html代码:
引入layui

<link rel="stylesheet" href="{
   
   {asset('static/layui/css/layui.css')}}">
<script type="text/javascript" src="{
   
   { asset('static/layui/layui.js')}}"></script>

 <button type="button" class="layui-btn" id="test1"><i class="layui-icon">&#xe67c;</i>上传图</button>
 <img id="imgname">
 <input type="hidden" name="img" id="img">
 
 <!-- 一般在表单提交时，都会存放一个隐藏的输入框 -->
 <input type="hidden" name="_token" class="tag_token" value="{
   
   { csrf_token() }}">

js代码:

<script>
layui.use('upload', function(){
  var upload = layui.upload;
  $ = layui.jquery;
  var tag_token = $(".tag_token").val();		//ajax 请求前，先获取 csrf_token() 值 
  //执行实例
  var uploadInst = upload.render({
    elem: '#test1' //绑定元素
    ,url: '{
   
   { url("student/uploads")}}' //上传接口
    ,data:{'_token':tag_token}			//ajax 请求时，将该值作为数据的一部分传输过去
    ,exts: 'jpg|png|gif'
    ,done: function(res){
        if(res.code == 200){
            layer.msg('上传成功!');
            $('#imgname').attr('src','/uploads/'+res.data);
            $('#img').attr('value',res.data);
        }
    }
    ,error: function(){
      //请求异常回调
    }
  });
});
</script>

后端处理:

public function uploads(Request $request){
        if($request->isMethod('POST')){
            $file = $request->file('file');     //接受
            //文件是否上传成功
            if($file->isValid()){
                //源文件名
                $originaName = $file->getClientOriginalName();
                //扩展名
                $ext = $file->getClientOriginalExtension();
                //MimeType
                $type = $file->getClientMimeType();
                //临时绝对路径
                $realPath = $file->getRealPath();
                //文件名
                $filename = date('Y-m-d').'-'.uniqid().'.'.$ext;
                //方法:返回boolean值
                $bool = Storage::disk('uploads')->put($filename,file_get_contents($realPath));
                if($bool == true){
                    return ['code'=>200,'data'=>$filename];
                }else{
                    return ['code'=>0,'msg'=>'上传失败!'];
                }
            }
        }
    }

laravel5.2+layui图片上传及VerifyCsrfToken报错问题的解决

layui上传文件的使用:

猜你喜欢