与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

回答

相关问题