我最近在我的 laravel 项目中使用了 JCrop，但是虽然我选择了一张照片并加载了它，但我得到了验证错误 image is requred

Posted 2023-02-25

【中文标题】我最近在我的 laravel 项目中使用了 JCrop，但是虽然我选择了一张照片并加载了它，但我得到了验证错误 image is requred

【英文标题】：i recently used JCrop in my laravel project , but although i choose a photo and its loaded , i get validation error image is requred

【发布时间】：2019-05-20 03:45:22

【问题描述】：

我遵循了这个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

【问题讨论】：

处理文件上传和裁剪的 jcrop javascript 代码是什么？上传/裁剪图像后，控制台中是否有任何错误？

@Jeemusu 谢谢你的提问，是的，当我上传照片时，我收到了这个错误

FileAPI.min.js:2 POST localhost:8000/server/ctrl.php?fileapi155832644515911 404（未找到）_send @FileAPI.min.js:2（匿名）@FileAPI.min.js:2（匿名）@FileAPI。 min.js:2 end @FileAPI.min.js:2 check @FileAPI.min.js:2 setTimeout (async) next @ FileAPI.min.js:2 (anonymous) @ FileAPI.min.js:2 (anonymous) @ FileAPI.min.js:2 FileAPI.min.js:2 错误：404 FileAPI.min.js:2 xhr.end:404 未定义

您是否在页面中包含了 FileApi javascript 文件？确保此时间戳列出的所有文件都包含在您的页面中，如示例中所示。 youtu.be/aflTCbGdzDc?t=113

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

【参考方案1】：

在 cmets 中与您交谈后，您的 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 可以访问它们。

示例用法

<!-- 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/ 中访问这些文件。

【讨论】：

我添加了一个例子。无论您使用本地服务器还是网络服务器都没有关系。您需要将 staticPath 设置为包含 FileAPI 文件的 webroot/public 目录（其中包含您的 index.php 的目录）目录。