0
イメージの操作を使用して自分のパブリックフォルダにイメージを保存するコントローラを構築しようとしています。私はCropit jquery plugin for image croppingを使用してajaxを使用しました。エラー"RouteCollection.php行218のMethodNotAllowedHttpException"が発生します。下は私のコントローラ、ルート、ビューです。RouteCollection.php行でMethodNotAllowedHttpExceptionが発生しました。laravelでエラーが発生しました。
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>
方法そのエラーを解決するには？ は、あなたのAjaxのリクエストで
<meta name="csrf-token" content="{{ csrf_token() }}">また
この$.ajaxSetup({ headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') } });
はそれが動作するかどうか、私に教えてください追加するには、
'event.preventDefault（）' 'あなたはあなたのフォームに定義されたaction'属性は自己（現在のページ）に提出しようとする必要はありませんので、通常は私が考えている、提出防止するのコースは、定義されたルートごとに投稿後のリクエストを許可しません。だから、 'event.preventDefault（）'行の '//'（コメントアウト）を取り除いてみてください – Donkarnash
ちょっと疑問を尋ねると、あなたは正しいURLに投稿していますか？ FirefoxやChromeでネットワークタブは何を言いますか？ 編集：私はあなたがフォームを投稿していると思いますが、私はアクションがないので、現在のURLへの投稿です。 編集2：ajaxsetupにX-CSRF-TOKENヘッダーを実装する必要があるため、フォームを投稿しているか、csrfトークンエラーが発生している可能性があります。 –