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

我遵循了这个

https://www.youtube.com/watch?v=aflTCbGdzDc

tutorial，我设法在我的

laravel

项目中加入了

Jcrop

，一切正常。我单击

选择图像

，裁剪图像，图像显示在

jcrop图像框

中。但是当我提交表格的时候。我在

验证

中得到一个错误，即，

图像是必需的

（我为图像文件编写了一个

验证

）。为什么我会犯这个错误？？？图像显示在那个盒子里。我做错了什么？或者JCrop有问题吗？！！请帮帮我

这是我上传时的图像：

这是我提交时的图像，我收到错误信息：

模板代码： 我在控制台中遇到此错误：

---

POSThttp://localhost:8000/server/ctrl.php?fileapi155834626282411 404（未找到）FileAPI.min.js:2

在评论中与您交谈后，您会发现FileAPI javascript文件中出现404错误

您对FileAPI使用了以下配置：

var-FileAPI={debug:true，media:true，staticPath:{{asset（'crop-userpic\FileAPI'）}}

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

您需要将
staticPath
设置为公共目录中FileAPI javascript文件的位置，以便jcrop可以访问这些文件

示例用法

window.FileAPI={
调试：错误，
媒体:对,，
静态路径：'/js/jquery.fileapi/fileapi/'
};

在上面的示例中，
staticPath
是指向文件
FileAPI.min.js
和
FileAPI.exif.js
的路径

您应该确保可以从
/public/js/jquery.fileapi/fileapi/
中访问这些文件。在评论中与您交谈后，您会发现fileapi javascript文件中出现404个错误

您对FileAPI使用了以下配置：

var-FileAPI={debug:true，media:true，staticPath:{{asset（'crop-userpic\FileAPI'）}}

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

您需要将
staticPath
设置为公共目录中FileAPI javascript文件的位置，以便jcrop可以访问这些文件

示例用法

window.FileAPI={
调试：错误，
媒体:对,，
静态路径：'/js/jquery.fileapi/fileapi/'
};

在上面的示例中，
staticPath
是指向文件
FileAPI.min.js
和
FileAPI.exif.js
的路径

您应该确保可以从
/public/js/jquery.fileapi/fileapi/
中访问这些文件。处理文件上载和裁剪的jcrop javascript代码是什么？上传/剪切图像后，控制台中是否有任何错误？@Jeemusu感谢您的提问，是的，当我上传照片时，我得到了这个错误FileAPI.min.js:2 POST 404（未找到）\u send@FileAPI.min.js:2（匿名）@FileAPI.min.js:2（匿名）@FileAPI.min.js:2 end@FileAPI.min.js:2 check@FileAPI.min.js:2 setTimeout（异步）下一个@FileAPI.min.js:2（匿名）@FileAPI.min.js:2（匿名）@FileAPI.min.js:2 FileAPI.min.js:2错误：404 FileAPI.min.js:2 xhr.end:404未定义页面中是否包含FileAPI javascript文件？确保此时间戳列出的所有文件都包含在页面中，如示例所示。var FileAPI={debug:true，media:true，staticPath:{{asset（'crop-userpic\FileAPI'）}}；处理文件上传和裁剪的jcrop javascript代码是什么？上传/剪切图像后，控制台中是否有任何错误？@Jeemusu感谢您的提问，是的，当我上传照片时，我得到了这个错误FileAPI.min.js:2 POST 404（未找到）\u send@FileAPI.min.js:2（匿名）@FileAPI.min.js:2（匿名）@FileAPI.min.js:2 end@FileAPI.min.js:2 check@FileAPI.min.js:2 setTimeout（异步）下一个@FileAPI.min.js:2（匿名）@FileAPI.min.js:2（匿名）@FileAPI.min.js:2 FileAPI.min.js:2错误：404 FileAPI.min.js:2 xhr.end:404未定义页面中是否包含FileAPI javascript文件？确保此时间戳列出的所有文件都包含在页面中，如示例所示。var FileAPI={debug:true，media:true，staticPath:{{asset（'crop-userpic\FileAPI'）}}；我加了一个例子。无论您使用的是本地服务器还是Web服务器。您需要将
staticPath
设置为webroot/public目录（其中包含index.php的目录）中包含FileAPI文件的目录。我添加了一个示例。无论您使用的是本地服务器还是Web服务器。您需要将
staticPath
设置为webroot/public目录（其中包含index.php的目录）中包含FileAPI文件的目录。
<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' => 'وارد کردن تصویر الزامی است',

    ];
}

<!-- 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>