我最近在laravel项目中使用了JCrop，但尽管我选择了一张照片并加载了它，但仍需要验证错误图像

Question

我遵循了这个<div [innerHTML]="content"></div> 教程，并且设法在我的https://www.youtube.com/watch?v=aflTCbGdzDc项目中加入了Jcrop，一切正常。单击laravel，裁剪图像，图像显示在choose image中。但是当我提交表格时。我在jcrop image box中收到错误消息validation（我为图像文件写了image is required）。为什么我会收到此错误？图像显示在该框中。我究竟做错了什么 ？还是validation有问题？！请帮助我。

这是我上传的图片： https://drive.google.com/open?id=1qgEmA9RlKy_eilZohCLajGmnVfqWSB9E

这是我提交的图片，但出现错误：https://drive.google.com/open?id=1gSCurwZ50TF_nMZZcWnJ4keBsJmcQKEh

模板代码：

JCrop

验证码：

<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' => 'وارد کردن تصویر الزامی است', ]; }

Answer 1

在评论中与您交谈后，在FileAPI javascript文件上会显示您收到404错误。

您为FileAPI使用了以下配置：

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

这是将您的staticPath设置为/resources/assets/crop-userpic/FileAPI目录，这会将它们放置在您网站的网络根目录之外。

您需要将staticPath设置为公共目录中FileAPI javascript文件的位置，以便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/内部访问这些文件。