在 Laravel 8 中的 js 文件中分隔 Javascript Ajax 代码不起作用

Question

我是 ajax 和运行问题的新手。我会尽力解释我的问题。

我正在 Laravel 8 做一个项目。
用户可以选择 select 一张照片。 CropperJS 用于此。
一切正常，只要我将 javascript 和 Ajax 代码放在单独的文件中，我就会收到一条错误消息（不支持 POST 方法路由。支持的方法：GET、HEAD、PATCH。）如何让 ajax 调用在单独的文件中工作？

路线

Route::get('/image/create', 'ProfileImage\CreateController@create')->name('image.create');
Route::post('/image/store', 'ProfileImage\StoreController@store')->name('image.store');

控制器

public function create()
    {
        return view('pages.image.create');
    }


public function store(StoreProfileImageRequest $request, ProfileImage $profileImage)
    {
        $profileId = auth()->user()->profile->id;
        $validated = $request->validated();
        $image = $validated['image_name'];

        $this->profileImageRepositoryInterface->storeImage($profileImage, $profileId, $image, $validated);


        session()->flash('success', 'Uw afbeelding is succesvol opgeslagen.');

        return response()->json(
            [
                'status' => 'success',
                'message' => 'my message.',
                'url' => route('profile.index')
            ]);   
    }

形式

<form class="text-left"
                              data-form-output="form-output-global"
                              data-form-type="contact"
                              method="post"
                              enctype="multipart/form-data"
                        >
                            @csrf

                            <div class="member-block-body">
                                <label for="upload_image">
                                    
                                </label>
                                <input type="file" name="image_name" class="image" id="upload_image">
                            </div>

                            <span class="invalid-feedback ct_invalid_feedback" role="alert">
                                <strong id="ajax_image_error"></strong>
                            </span>
                        </form>

模态

<div class="modal fade" id="modal" tabindex="-1" role="dialog" aria-labelledby="modalImageCropper" aria-hidden="true">
    <div class="modal-dialog ct_modal_lg modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">
                    @lang('Afbeelding aanpassen voordat u deze uploadt.')
                </h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">
                        x
                    </span>
                </button>
            </div>
            <div class="modal-body">
                <div class="ct_img_container">
                    <div class="row">
                        <div class="col-md-8">
                            <img src="" id="sample_image" alt="">
                        </div>
                        <div class="col-md-4">
                            <div class="ct_cropper_image_preview"></div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" id="crop-image" class="btn btn-primary">
                    @lang('Opslaan')
                </button>
                <button type="button" class="btn btn-secondary" data-dismiss="modal">
                    @lang('Annuleren')
                </button>
            </div>
        </div>
    </div>
</div>

javascript custom_function.js

$(document).ready(function () {
    let $modal = $('#modal');
    let image = document.getElementById('sample_image');
    let cropper;

    $('#upload_image').change(function (event) {
        let files = event.target.files;
        let done = function (url) {
            image.src = url;
            $modal.modal('show');
        };

        if (files && files.length > 0) {
            reader = new FileReader();
            reader.onload = function (event) {
                done(reader.result);
            };
            reader.readAsDataURL(files[0]);
        }
    });

    $modal.on('shown.bs.modal', function () {
        cropper = new Cropper(image, {
            aspectRatio: 1,
            viewMode: 3,
            preview: '.ct_cropper_image_preview'
        });
    }).on('hidden.bs.modal', function () {
        cropper.destroy();
        cropper = null;
    });

    $('#crop-image').click(function () {

        $('#ajax_image_error').text('');

        canvas = cropper.getCroppedCanvas({
            width: 600,
            height: 600
        });

        canvas.toBlob(function (blob) {
            url = URL.createObjectURL(blob);
            let reader = new FileReader();
            reader.readAsDataURL(blob);
            reader.onloadend = function () {
                let base64data = reader.result;
                $.ajax({
                    url: '{{ route("image.store") }}',
                    method: 'POST',
                    data: {
                        '_token': '{{ csrf_token() }}',
                        image_name: base64data
                    },
                    success: function (data) {
                        if (data.status === 'success') {
                            window.location = data.url;
                            $modal.modal('hide');
                            $("#image-preview").attr("src", base64data);
                        }
                    },
                    error: function (data) {
                        if (data.status === 422) {
                            let response = $.parseJSON(data.responseText);
                            $.each(response.errors, function (key, val) {
                                $("#" + "ajax_" + key + "_error").text(val[0]);
                            });
                        }
                    }
                });
            };
        });
    });
});

Answer 1

感谢您的提示。刚刚解决了问题。

$.ajax({
                    url: '/image/store',
                    // url: '{{ route("image.store") }}',
                    method: 'POST',
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    },
                    data: {
                        // '_token': '{{ csrf_token() }}',
                        image_name: base64data
                    },
                    success: function (data) {
                        if (data.status === 'success') {
                            window.location = data.url;
                            $modal.modal('hide');
                            $("#image-preview").attr("src", base64data);
                        }
                    },
                    error: function (data) {
                        if (data.status === 422) {
                            let response = $.parseJSON(data.responseText);
                            $.each(response.errors, function (key, val) {
                                $("#" + "ajax_" + key + "_error").text(val[0]);
                            });
                        }
                    }
                });

在 Laravel 8 中的 js 文件中分隔 Javascript Ajax 代码不起作用

Separating Javascript Ajax codes in a js file in Laravel 8 does not work

javascript

ajax

laravel

laravel-8