首页 > 解决方案 > 如何在 Laravel 中使用 Jcrop

问题描述

我已经看过这个https://www.youtube.com/watch?v=aflTCbGdzDc关于使用 jcrop 的教程,但它是针对 的Php,当我使用它时Laravel,程序会停在Validation,说image filed is required,就像我没有选择图像,但我有!,我看到了框中的图像。注意:当我在裁剪模式中按下上传按钮时,出现此错误: POST http://localhost:8000/server/ctrl.php?fileapi155837244028211 404 (Not Found),似乎我需要设置一个帖子路由,但是如何?我不知道 。有谁知道我们应该如何在 laravel 中使用 jcrop ?这是我的代码:

<link href="{{asset('crop-userpic\style.css')}}" rel="stylesheet"/>
    <link href="{{asset('crop-userpic\jcrop\jquery.jcrop.min.css')}}" rel="stylesheet"/>

    <form method="post" action="{{route('testing')}}" enctype="multipart/form-data">
        @csrf
        <div class="container">
            <div id="userpic" class="userpic">
                <div class="js-preview userpic__preview"></div>
                <div class="btn btn-success js-fileapi-wrapper">
                    <div class="js-browse">
                        <span class="btn-txt">انتخاب عکس</span>
                        <input type="file" name="image" id="image">
                    </div>
                    <div class="js-upload" style="display: none;">
                        <div class="progress progress-success">
                            <div class="js-progress bar"></div>
                        </div>
                        <span class="btn-txt">در حال بارگذاری</span>
                    </div>
                </div>
            </div>
        </div>

        <div id="popup" class="popup" style="display: none">
            <div class="popup__body">
                <div class="js-img"></div>
            </div>
            <div style="margin: 0 0 5px;text-align: center">
                <div class="js-upload btn btn_browse btn_browse_small">بارگذاری</div>
            </div>
        </div>
        <input type="submit" name="submit" value="sumbit" />
    </form>



    <script src="{{asset('crop-userpic\jquery.min.js')}}"></script>
    <script src="{{asset('crop-userpic\jquery.easing.min.js')}}"></script>
    <script>
        var FileAPI = {
            debug: true,
            media: true,
            staticPath: '{{asset('crop-userpic\FileAPI')}}'
        };
    </script>

    <script src="{{asset('crop-userpic\FileAPI\FileAPI.min.js')}}"></script>
    <script src="{{asset('crop-userpic\FileAPI\FileAPI.exif.js')}}"></script>
    <script src="{{asset('crop-userpic\jquery.Fileapi.js')}}"></script>
    <script src="{{asset('crop-userpic\jcrop\jquery.Jcrop.min.js')}}"></script>
    <script src="{{asset('crop-userpic\statics\jquery.modal.js')}}"></script>
    <script src="{{asset('crop-userpic\script.js')}}"></script>

这是图片:https ://drive.google.com/open?id=1qgEmA9RlKy_eilZohCLajGmnVfqWSB9E

如您所见,图像在框中,但是当我推送提交时,我收到验证错误image field is required,就像我根本没有图像一样

请帮我 。我不知道该怎么办 。我喜欢这个 Jcrop 。

标签: laraveljcroplaravel-validation

解决方案


推荐阅读