如何用laravel保存裁剪的头像

问题描述：

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..

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>

所以我的网站（使用laravel 5构建）允许用户上传图像，裁剪它（使用croppie.js），但这是问题 - 我得到的裁剪图像基于64个数据URI，我不知道如何上传它。 p>

我的试验： 1。最初我使用表单发布它 - 但现在我得到base64 URI，我不能把它放在表单中的某些＆lt; input＆gt; code>元素中，如下所示： p> \ n

p>


 
 
  
 
  ＆lt; form .....＆gt; 
 
 
 
＆lt; div class =“actions”＆gt;  
 
＆lt; button class =“file-btn”＆gt;  
 
＆lt; div＆gt;上传＆lt; / div＆gt; 
 
＆lt; input name =“original”type =“file”id =“upload”/＆gt;  
 
＆lt; / button＆gt;  
 
＆lt; div class =“crop”＆gt;  
 
＆lt; div id =“upload-demo”＆gt;＆lt; / div＆gt;  
 
＆lt; / div＆gt;  
 
＆lt; div id =“result”＆gt;＆lt; / div＆gt;  
 
＆lt; / div＆gt; 
 
＆lt; input id =“image”type =“hidden”name =“image”＆gt;  
 
 
 
＆lt; / form＆gt;  code>  pre> 
 
  div> 
 
  div> 
 
 
 
 如果我能 将生成的base64 URI绑定到隐藏的输入，它将是完美的！ 但是我无法做到..  p> 
 
 
我可以将base64发布到控制器 - 然后是什么？ 我应该只将非常长的字符串存储在数据库中，还是在服务器端生成图像，然后存储在服务器中？ li> 
  ol> 
 
 似乎第一种方法更容易但是 我一直在谷歌搜索4个小时，但没有得到答案......  p> 
  div>

答

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?

如何用laravel保存裁剪的头像

相关推荐