laravel5.2 + layui画像のアップロードとVerifyCsrfTokenエラーレポートの問題を解決します

私自身のLaravel5.2フレームワークプロジェクトでは、Layerの画像アップロード機能を統合したいと思っていますが、ajax(POST)でリクエストを送信すると、常に500エラーが表示され、VerifyCsrfTokenエラーの問題に関連するコンテンツがあります。共有してください。
エラー
ここに画像の説明を挿入
理由を確認してください。
無視するCSRFの制限により、LaravelはVerifyCsrfTokenのミドルウェアをグローバルに登録し、すべてのPost、Put、およびDeleteリクエストに有効な_csrfトークンがあるかどうかを自動的に確認することをお勧めします。

解決方法
1.次の非表示フィールドコードをフォームに追加します

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

方法2.フォームにcsrf_fieldを追加します
(上記のソリューション関数と一致します)

{!! csrf_field() !!}

方法3.Kernel.phpコードをコメント化する
app \ Http \ Kernel.phpを開き、ファイル内の次のコードをコメントアウトします

\App\Http\Middleware\VerifyCsrfToken::class

メソッド
4.handle()メソッドを変更する\ app \ Http \ Middleware \ VerificationCsrfToken.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:ローカルスペース;デフォルトはローカル;
storage_path()はファイルがストレージファイルに保存されているアプリを指します;
public_path( )参照:ファイルはパブリックファイルの下にアップロードで保存されます
。s3:Amazonの設定であり、無視できます。

ルーティング:

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'=>'上传失败!'];
                }
            }
        }
    }

おすすめ

転載: blog.csdn.net/hgb24660/article/details/102457149