Question

我开始学习laravel，并试图用它创建一个网站。我正在尝试实施＆＃34;上传裁剪图片＆＃34;。我使用croppie https://foliotek.github.io/Croppie/并设法在浏览器上成功显示。

现在，我想将图像保存到数据库中。我在这个阶段挣扎，我花了好几个小时搜索和尝试，但它似乎没有用。我读过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}', 'ProgramController@updateImage')->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;

}

Answer 1

要获取base64图像，请使用此选项：

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

Answer 2

这里是上传图片的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
        }
    });
});

使用laravel保存裁剪图像

2 个答案: