пустое изображение загружено с помощью ajax после обрезки с помощью обрезки. js in Laravel - PullRequest
Новая
       13

пустое изображение загружено с помощью ajax после обрезки с помощью обрезки. js in Laravel

0 голосов
/ 23 марта 2020

Я использовал кроппер. 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]);
  }
...