RouteCollection.php 中的 MethodNotAllowedHttpException 第 218 行错误发生在 laravel答案

【问题标题】：MethodNotAllowedHttpException in RouteCollection.php line 218 error occured in laravelRouteCollection.php 中的 MethodNotAllowedHttpException 第 218 行错误发生在 laravel
【发布时间】：2016-12-11 19:24:29
【问题描述】：

我正在尝试使用图像干预构建将图像保存在我的公用文件夹中的控制器。我使用 Cropit jquery 插件进行图像裁剪并使用 ajax。发生错误" MethodNotAllowedHttpException in RouteCollection.php line 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'=>'CropController@crop',
    '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>

如何解决这个错误？谢谢

【问题讨论】：

event.preventDefault() 阻止正常提交，我认为这是因为您没有在表单上定义 action 属性尝试提交给自己（当前页面），这当然不会根据定义的路由允许发布请求。所以在删除event.preventDefault()线上的'//'（注释掉）后尝试
只是问愚蠢的问题，您确定您发布到正确的 URL 吗？ Firefox 或 Chrome 中的网络标签是什么意思？编辑：我认为您正在通过表单发布，但我没有采取任何行动，因此将其发布到当前所在的 URL。编辑 2：我几乎可以肯定您是通过表单发布的，否则您会收到 csrf 令牌错误，因为您需要在 ajaxsetup 中实现 X-CSRF-TOKEN 标头。

标签： ajax laravel-5

【解决方案1】：

嘿，尝试在您的布局中添加此元标记
<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

【讨论】：