在 laravel 中上传使用cropper.js 插件裁剪的图像答案

【问题标题】：Uploading an image cropped using a cropper.js plugin in laravel在 laravel 中上传使用cropper.js 插件裁剪的图像
【发布时间】：2017-10-01 15:53:59
【问题描述】：

我在我的应用程序中使用了cropper.js 插件来裁剪图像。我能够裁剪图像。现在我正在尝试将图像发送到服务器并保存它们。我更新了显示裁剪图像的模态窗口，如下所示：

ent<!-- Modal -->
<div class="modal fade" id="modal" role="dialog" aria-labelledby="modalLabel" tabindex="-1">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="modalLabel">Cropper</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span></button>
            </div>
            <div class="modal-body">
                <div class="img-container">
                    <img id="image" src="" alt="Picture">
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>er code here

我使用 Ajax 请求将图像发送到服务器，如下脚本：

cropper.getCroppedCanvas().toBlob(function (blob) {
                var formData = new FormData();
                formData.append('croppedImage', blob);
                $.ajax({
                    url: 'upload/image-crop',
                    type: 'GET',
                    data: formData,
                    processData: false,
                    contentType: false,
                    success: function () {
                        console.log('Upload success');
                    },
                    error: function () {
                        console.log('Upload error');
                    }
                });
            });

并将图像保存在控制器中，如下所示：

public function uploadImageCrop(Request $request){
    $data = $request->croppedImage;
    $data = base64_decode($data);
    $image_name= time().'.jpg';
    $path = public_path() . "\images\upload\img" . $image_name;
    file_put_contents($path, $data);
    return response()->json(['success'=>'done']);
}

这项工作成功，但没有保存有效的图像。

【问题讨论】：

“它成功运行”到底是什么意思。你收到json响应['success'=>'done']了吗？

标签： javascript php jquery image laravel-5.2

【解决方案1】：

其中一个问题可能是尝试通过GET 上传图片。尝试在您的 ajax 请求中将 HTTP 动词更改为 POST 和 routes.php

            $.ajax({
                url: 'upload/image-crop',
                type: 'POST',
                ...

【讨论】：