2016-12-11 56 views
0

我試圖構建控制器,使用圖像干預將圖像保存在公用文件夾中。我已經使用Cropit jquery插件的圖像裁剪和使用ajax。錯誤「RouteCollection.php 218行中的MethodNotAllowedHttpException」發生。下面是我的控制器,路由和視圖。RouteCollection.php中的MethodNotAllowedHttpException在laravel中發生錯誤218錯誤

CropController.php

<?php 

namespace App\Http\Controllers; 


use Illuminate\Http\Request; 
use Image; 

class CropController extends Controller 
{ 
    public function crop(Request $request){ 
     $img = $request->image_data; 
     $img = str_replace('data:image/png;base64,', '', $img); 
     $img = str_replace(' ', '+', $img); 
     $data = base64_decode($img); 
     Image::make($data)->save('images/images.jpg'); 
     dd("image saved in images/images.jpg"); 
    } 
} 

web.php

Route::get('/', function() { 
    return view('welcome'); 
}); 
Route::post('/image-crop',[ 
    'uses'=>'[email protected]', 
    'as'=>'image-crop', 
]); 

welcome.blade.php

<body> 
    <form method="post"> 
    <input type="hidden" value="{{Session::token()}}" name="_token"> 
     <div class="image-editor"> 
     <input type="file" class="cropit-image-input"> 
     <div class="cropit-preview"></div> 
     <div class="image-size-label"> 
      Resize image 
     </div> 
     <input type="range" class="cropit-image-zoom-input"> 
     <input type="hidden" name="imagedata" class="hidden-image-data" /> 
     <button type="submit">Submit</button> 

     </div> 
    </form> 



    <script> 

    var url1="{{route('image-crop')}}"; 
     $(function() { 
     $('.image-editor').cropit(); 

     $('form').submit(function() { 
      //event.preventDefault(); 
      // Move cropped image data to hidden input 

      var imageData = $('.image-editor').cropit('export'); 
      $('.hidden-image-data').val(imageData); 

      // Print HTTP request params 
      var formValue = $(this).serialize(); 

      $.ajax({ 
       type:'post', 
       data:formValue, 
       url: '/image-crop', 
       success: function(data){ 
       $('#result-data').text('New file in: images/'+data); 
       $('#crop').show(); 
       } 

     }) 
      .done(function(){ 
       window.location.href=""+'/image-crop'; 
      });   


      return true; 
     }); 
     }); 
    </script> 
    </body> 

如何解決這個錯誤? 謝謝

+0

'event.preventDefault()'防止正常提交,我想既然你沒有一個'你的表界定action'屬性嘗試提交到自身(當前頁面),其中當然不允許根據定義的路線發佈發佈請求。所以嘗試刪除行'event.preventDefault()''''(註釋掉)' – Donkarnash

+0

只要問啞問題,你確定你張貼到正確的URL?網絡標籤在Firefox或Chrome中說什麼? 編輯:我認爲你通過表單發佈,但我沒有一個行動,所以它張貼到它目前的URL。 編輯2:因爲你需要在ajaxsetup中實現X-CSRF-TOKEN標頭,編輯2:我幾乎肯定你通過表單發佈,或者els你會得到一個csrf標記錯誤。 –

回答

0

嘿嘗試添加在你的佈局這個元標記
<meta name="csrf-token" content="{{ csrf_token() }}">

此外,在您的Ajax請求添加此$.ajaxSetup({ headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') } });

讓我知道,如果它的工作原理!

https://laravel.com/docs/5.1/routing#csrf-x-csrf-token

相關問題