如何用laravel保存裁剪的头像

Question

So my website (built with laravel 5) allows users to upload an image, crop it (with croppie.js), but here's the problem - the cropped image I get is based 64 data URI and I don't know how to upload it.

My trials: 1. Initially I used a form to post it - but now I get base64 URI, I can't put it in some <input> element in the form, like this:

<form.....>

    <div class="actions"> 
        <button class="file-btn"> 
            <div>Upload</div>
            <input name="original" type="file" id="upload"/> 
        </button> 
        <div class="crop"> 
            <div id="upload-demo"></div> 
        </div> 
        <div id="result"></div> 
    </div>
    <input id="image" type="hidden" name="image"> 

</form>

If I can bind the generated base64 URI to the hidden input it will be perfect! But I just can't make it..

1. I can post base64 to controller - then what? Should I just store the very long string in database, or generate a image at the server side, then store in the server?

Seems the first approach is easier but I have been googling for 4 hours and got no answer...

</div>

Answer 1

• crop image, generate base64 uri
• post base64 uri to laravel endpoint
• decode base64 uri on server side and store image

This should help with the decoding part:

Convert Base64 string to an image file?