與laravel

保存的裁剪圖像我開始學習laravel，並試圖使一個網站吧。我正在嘗試實現「上傳裁剪圖像」。我正在使用croppie https://foliotek.github.io/Croppie/併成功在瀏覽器上顯示。與laravel

現在，我想將圖像保存到數據庫中。我在這個階段苦苦掙扎，我花了數小時尋找和嘗試，但似乎並不奏效。我讀過laravel不使用補丁方法發送裁剪圖像以及我需要ajax。有人可以幫助我如何從表格中獲得base64。這是我的表格：

<form action="{{route('program.updateImage', ['id'=> $program->id])}}" method="post" enctype="multipart/form-data"> 
    {{ method_field('PATCH') }} 
    {{ csrf_field() }} 
    <div id="crop" class="croppie-container"> 

    </div> 
    <a class="upload-file"> 
     <span>Upload</span> 
     <input type="file" name="image" id="upload"><br> 
    </a> 
    <br> 
    <input type="submit" name="submit" value="Save image"> 
</form>

這是我的路線：

Route::patch('program/image/{id}', '[email protected]')->name('program.update');

代碼croppie

$(function() { 
    var basic = $('#crop').croppie({ 
     viewport: { 
     width: 400, 
     height: 200 
     }, 
     boundary: { width: 400, height: 300 }, 
    }); 
    basic.croppie('bind', { 
     url: '{{asset('images/'.$program->image)}}' 
    }); 
    }); 

    function readFile(input) { 
    if (input.files && input.files[0]) { 
     var reader = new FileReader(); 

     reader.onload = function (e) { 
     $('#crop').croppie('bind', { 
      url: e.target.result 
     }); 
     } 

     reader.readAsDataURL(input.files[0]); 
    } 
    } 

    $('.upload-file input').on('change',function(){ 
    readFile(this); 
    });

和我的功能：

public function updateImage(Request $request, $id){ 
    //$this->validate($request, array('image' => 'mimes:jpeg,jpg,png')); 
    $program = Program::find($id); 

    //list($type, $data) = explode(';', $data); 
    //list(, $data) = explode(',', $data); 

    //$data = base64_decode($data); 




    echo $request; 

}

來源

2017-08-17 Hiền Võ

就是你得到的base64字符串 –

用'代碼你提到的代碼croppie'有語法錯誤的URL –

是的，我已經意識到我有很多的我的代碼錯誤，我設法修復它們並獲得了我想要的功能。謝謝。 –

這裏上傳圖片的jQuery代碼

$('#crop_img_upload_button').on('click', function (e) { 
     var image_data = $('#crop').croppie('result', 'base64'); 
     if (image_data != '') { 
      var formData = $('#crop_it_form').serialize(); 
      $.ajax({ 
       type: "POST", 
       url: "uploadUrl", 
       data: formData, 
       cache: false, 
       success: function (data) 
       { 
        //response here 
       } 
      }); 
     } else { 
      // validation msg here 
     } 
    }); 
});

來源

2017-08-17 12:18:36

我沒有從控制器獲取數據，即時通訊使用$ request-> input（'data'）;這是正確的嗎？ –

我用這個作爲基地，並做了一些調整，並最終得到它的工作。 –

要獲得圖像的base64使用這個：

var base64 = $('#crop').croppie('result', 'base64');

來源

2017-08-17 12:02:00

回答

相關問題