Question

我已经使用cropper.js来裁剪图像。我已成功裁剪图像。但是当我在ajax中上传图像时，会出现图像文件，但大小为0。因此，服务器中从未保存过图像。这是我下面的源代码。

             <div class="myModal " id="avatarBox">
                <div class="avatar-box ">
                    <span class="icon icon-close" id="closeAvatarBox1"></span>
                    <div id="avatarHandlerBox">
                        <div class="avatar-image" style="position: relative">
                            <div class="avatar-loading hide" id="avatarLoading">上传处理中，请稍候.. 
                            </div>
                            <div class="avatar-tips">操作提示：鼠标滚轮缩放大小，拖动选区进行区域选择 
                             </div>
                            <div class="img-size-tips">当前尺寸：<span id="cropSize"></span></div>
                            <div class="avatar-image">
                                <img id="image" name="image" src="{{asset('img/asd.jpg')}}" 
                                alt="Picture">
                            </div>
                        </div>
                        <div class="avatar-btn-group">
                            <label class="space-mr20 btn-orange-auto-34">
                                上传新图
                                <input type="file" class="sr-only" id="inputImage" name="inputImage"
                                       accept=".jpg,.jpeg,.png,.gif,.bmp">
                            </label>
                            <button class="space-mr20 btn-auto-34" id="avatatUpload">确定</button>
                            <button class="btn-disabled-auto-34" id="closeAvatarBox2">取消</button>
                        </div>
                    </div>
                </div>`enter code here`
            </div>

and this is jquery code.


var btnUpload = $("#avatatUpload");
btnUpload.click(function () {
    var cropper = $image.data('cropper');
    var result = $image.cropper("getCroppedCanvas", "{'width':690,'height':310}");
    $(".modal-body").html(result);
    var crop = cropper.getCroppedCanvas({width:160, height:100,});    
    crop.toBlob(function (blob) {
          var formdata = new FormData();
           formdata.append('croppedImage', blob);
           $.ajax('/user/upload_avatar', {
               headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                method: "POST",
                data: formdata,
                enctype: 'multipart/form-data',
                cache : false,
                processData: false,
                contentType: false,
                success(){console.log("success")},
                error(){console.log("failed")},
            });
    });
});

这是下面的控制器零件代码。

 public function uploadAvatar(Request $request)
 {
    base64Str=substr($request->croppedImage, strpos($request- 
       >croppedImage,",")+1);
     $file=base64_decode($base64Str);
     $fullPath='public/img/'.'test'.'.jpg';
     Storage::put($fullPath, $file);
     return response()->json(['status'=>true]);
  }

在Laravel中使用cropper.js裁剪后，使用ajax上传的空图像

0 个答案: