Question

我在我的应用程序中使用了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']);
}

这项工作成功但不保存有效图像。

Answer 1

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

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

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

1 个答案: