я недавно использовал JCrop в своем проекте laravel, но хотя я выбираю фотографию и загружаю ее, я получаю сообщение об ошибке проверки изображения - PullRequest
Новая
       28

я недавно использовал JCrop в своем проекте laravel, но хотя я выбираю фотографию и загружаю ее, я получаю сообщение об ошибке проверки изображения

1 голос
/ 20 мая 2019

Я следовал этому уроку https://www.youtube.com/watch?v=aflTCbGdzDc, и мне удалось включить Jcrop в мой laravel проект, все работает нормально.Я нажимаю choose image, я обрезаю изображение, и изображение отображается в jcrop image box.но когда я отправляю форму.Я получаю ошибку в моем validation, который говорит, image is required (я написал validation для моего файла изображения).почему я получаю эту ошибку ???изображение показывается в этом поле.Что я делаю неправильно ?или есть проблема с JCrop? !!Пожалуйста, помогите мне.

Это изображение, когда я загружаю: https://drive.google.com/open?id=1qgEmA9RlKy_eilZohCLajGmnVfqWSB9E

Это изображение, когда я отправляю, и я получаю ошибку: https://drive.google.com/open?id=1gSCurwZ50TF_nMZZcWnJ4keBsJmcQKEh

Код шаблона: 

<form method="post" action="{{route('userRegister')}}" enctype="multipart/form-data">
@csrf
    <div class="col-md-6 alert alert-danger {{!empty($errors->all()) ? 'show' : 'hide'}}">
        <ul style="text-align: right;" dir="rtl">
        @foreach($errors->all() as $error)
            <li>{{$error}}</li>
        @endforeach
        </ul>
    </div>

<div class="row col-md-12" dir="rtl">
    <div class="input-group col-md-4">
        <div class="container" dir="ltr">
            <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="filedata" id="filedata" >
                    </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>
    </div>
</div>

Код проверки: 

public function rules()
{
    return [
        'filedata' => 'required|max:1024',
    ];
}

public function messages()
{
    return [
        'filedata.max' => 'سایز تصویر نمیتواند بیش از 2 مگابایت باشد',
        'filedata.required' => 'وارد کردن تصویر الزامی است',

    ];
}

Я получаю эту ошибку в своей консоли: POST http://localhost:8000/server/ctrl.php?fileapi155834626282411 404 (Not Found) FileAPI.min.js:2

1 Ответ

0 голосов
/ 20 мая 2019

После разговора с вами в комментариях вы получите 404 ошибки в файлах JavaScript FileAPI.

Вы использовали следующую конфигурацию для вашего FileAPI:

var FileAPI = { debug:true, media:true, staticPath:'{{asset('crop-userpic\FileAPI')}}' };

Это установило staticPath в каталог /resources/assets/crop-userpic/FileAPI, который разместил их вне webroot вашего сайта.

Вам необходимо установить staticPath для расположения файлов JavaScript FileAPI в вашем общедоступном каталоге, чтобы они могли быть доступны для jcrop.

Пример использования 

<!-- include jquery -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>

<!-- Set FileAPI settings -->
<script>
    window.FileAPI = {
          debug: false,
          media: true,
          staticPath: '/js/jquery.fileapi/FileAPI/'
    };
</script> 
<script src="/js/jquery.fileapi/FileAPI/FileAPI.min.js"></script>
<script src="/js/jquery.fileapi/FileAPI/FileAPI.exif.js"></script>
<script src="/js/jquery.fileapi/jquery.fileapi.min.js"></script>
<script src="/js/jcrop/jquery.Jcrop.min.js"></script>

В приведенном выше примере staticPath - это путь к файлам FileAPI.min.js и FileAPI.exif.js.

Вы должны убедиться, что эти файлы доступны из /public/js/jquery.fileapi/FileAPI/.

...