Laravel Ajax圖像上傳與預覽不工作？

Question

形式上傳使用Laravel形式門面

{{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'])}} 

使用malsupform插件，上傳圖像的腳本。

<script type="text/javascript"> 
    $("document").ready(function(){ 
     var options= { 
      beforeSubmit: showRequest, 
      success: showResponse, 
      dataType: 'json' 
     }; 
      $("#image").change(function(){ 
      $("#upload").ajaxForm(options).submit(); 
     }); 
    }); 

    function showRequest(formData, jqForm, options){ 
     $("#validation-errors").hide().empty(); 
     return true; 
    } 

    function showResponse(response, statusText, xhr, $form){ 
     if(response.success==false) 
     { 

      var arr= response.errors; 
      $.each(arr, function(index, value){ 
       if(value.length=!0){ 
        $("#validation-errors").append('<div class="alert alert-danger">+value+</div'); 
       } 
      }); 
      $("#validation-errors").show(); 
     }else{ 
      console.log(response.file); 
      $("#output").html("<img src='"+response.file+"'/>"); 
     } 
    } 
</script> 

處理上傳和存儲方法的路線。

Route::resource('jcrop', 'Admin\JcropController'); 

Controller處理上載並返回數據的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也。請幫我解決這個問題？

Answer 1

我覺得問題是用saveImage()返回。請使用url('/')來代替base_path()。 base_path()返回服務器路徑不是URL。

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