Javascript 带预览的Laravel Ajax图像上载不起作用？

使用Laravel form Facade上传图像的表单

{{Form:: open(['route'=>'jcrop.store', 'method'=>'post','id'=>'upload','role'=>'form-role', 'enctype'=>'multipart/form-data'])}}
 @include('backend.admin.jcrop.general._form',['submitButton'=>'Save Values'])
{{Form:: close()}}

包含的表格

<div class="form-group">
    {{Form:: label('title','Title')}}
    {{Form:: text('title',null,['placeholder'=>'Enter Title', 'class'=>'form-control'])}}
</div>
<div class="form-group">
    {{Form:: label('rank','Rank')}}
    {{Form:: number('rank',null,['placeholder'=>'Enter Rank', 'class'=>'form-control'])}}
</div>
<div class="form-group">
    {{Form:: label('image','Image')}}
    {{Form:: file('image',null,['placeholder'=>'Enter Rank', 'class'=>'form-control', 'id'=> 'image'])}}
</div>
<div class="form-group">
    {{Form:: label('status','Status:')}}
    {!! Form::radio('status', '1', 'true')!!} Active
    {!! Form::radio('status', '0')!!} De-Active
</div>

{{Form:: button($submitButton,['class'=>'btn btn-primary','type'=>'submit'])}}
{{Form:: button('Reset',['class'=>'btn btn-danger','name'=>'reset','type'=>'reset'])}}

处理上传并返回数据json格式的控制器

这是我在其中声明了一些受保护变量的控制器文件

protected $view_path    = 'backend.admin.jcrop';
protected $imagePath    = '\public\uploads\jcrop';
protected $imageUrl     = 'uploads\jcrop';

控制器函数，用于处理上载并返回数据的json格式

public function store(Request $request)
    {
      if($request->hasFile('image')){
            $image= $this->saveImage($request->file('image'));

这里我创建了一个名为saveImage（）的简单函数，它上载图像并返回上载的文件

            $file= base_path(). $this->imagePath.'/' .$image->getFileName();
            if($image){
                return response()->json(['success'=>'true', 'file'=>$file]);
        }
      }
         }

处理上传的函数是

protected function saveImage($image)
    {
        $filename= $image->getClientOriginalName();
        $filename= pathinfo($filename, PATHINFO_FILENAME);
        $file= $filename. '.' .$image->getClientOriginalExtension();
        $upload= $image->move(base_path().$this->imagePath, $file);
        return $upload;
    }

除了返回数据外，一切正常

        Not allowed to load local resource:

---

在chrome和FireFox中也是如此。请帮我解决这个问题好吗

我认为问题在于

saveImage（）

返回。尝试使用

url（'/'）

而不是

base\u path（）
base_path（）
返回服务器路径而不是URL

$file= url('public/uploads/jcrop').$image->getFileName();

是的，它工作了，但在视图中图像仍然没有加载，当检查图像时，我在chrome控制台上看到未找到的图像，单击它在新选项卡上看到，我发现未找到http异常…这背后的原因是什么？？？@Ravi你能提供什么是图像url看起来像ElaravelProject.dev/public/uploads/jcrop/{filename}@Ravi您是否仔细检查了文件夹中是否存在文件？
        Not allowed to load local resource:

$file= url('public/uploads/jcrop').$image->getFileName();