formData приходит со значением null в Laravel

Question

Пытаюсь передать изображение, форматированное через Cropper.js в canvas.

В Laravel 8 он не отображается.

JS.

$('input[name="img-input"]').change(function () {

if (this.files && this.files[0]) {
    let reader = new FileReader();
    reader.onload = function (e) {
        $('#image').attr('src', e.target.result);
    }
    reader.readAsDataURL(this.files[0]);
}

let image = document.getElementById('image');

setTimeout(
    ()=> {
        cropper = new Cropper(image, {
            aspectRatio: 1 / 1,
            preview: '.img-preview'
        });
    }, 500
  )
});

$('#image-modal').on('hidden.bs.modal', function () {
  $('#image').removeAttr('src');
    if (cropper) {
      cropperDestroy();
    }
});

function cropperDestroy() {
   cropBoxData = cropper.getCropBoxData();
   canvasData = cropper.getCanvasData();
   cropper.destroy();
}

$('.save-image').click(function () {
   if (cropper) {
    let method = $(this).data('method');
    let uri = $(this).data('uri');

    cropper.getCroppedCanvas().toBlob(function (blob) {
        var formData = new FormData();

        formData.append('image', blob, 'imageName');

        console.log(formData.get('image'));

        $.ajax({
            url: `${uri}`,
            type: method,
            data: formData,
            processData: false,
            contentType: false,
            headers: {
                'X-CSRF-TOKEN': csrfToken
            },
            success: (data) => {
                console.log(data);
                let response = data;
                notyf.success({
                    message: response.message
                });
            },
            error: (data) => {
                let response = data.responseJSON;
                console.log(response);
                notyf.error({
                    message: response.message
                });
            },
        });
    }/*, 'image/png' */);

    $('#image-modal').modal('hide');
    $('#image').removeAttr('src');
    if (cropper) {
        cropperDestroy();
    }
}
else {
    notyf.error({
        message: 'Вы не загрузили фотографию!'
    });
}
});

Laravel. Controller

if ($request->ajax()) {
       $file = $request->file('image');

       return response()->json([
          'status' => 'success',
          'message' => 'Без изменений!',
          'image' => $file
       ]);
   }

Вот что отображается в консоли. Если в JS посмотреть formData.get('image'), то данные есть. Если через Laravel Controller, то такого файла не существует

Answer 1

В общем проблема в том, что JS знает только о методах GET и POST, а другие типа PUT, DELETE и т.д. это методы Laravel. При формировании FormData нужно дополнительным полем указать поле с именем _method и значением PUT, что эквивалентно @method('PUT'), а в ajax указать метод POST. Выглядит это вот так:

cropper.getCroppedCanvas().toBlob(function (blob) {
        var formData = new FormData();

        formData.append('image', blob, 'imageName');
        formData.append('_method', 'PUT'); //Нужно добавить эту строчку

        console.log(formData.get('image'));
        $.ajax({
            url: `${uri}`,
            type: 'POST', //Тип обязательно указать POST
            data: formData,
            processData: false,
            contentType: false,
            headers: {
                'X-CSRF-TOKEN': csrfToken
            },
            success: (data) => {
                console.log(data);
                let response = data;
                notyf.success({
                    message: response.message
                });
            },
            error: (data) => {
                let response = data.responseJSON;
                console.log(response);
                notyf.error({
                    message: response.message
                });
            },
        });
    }/*, 'image/png' */);

БЛОГ НА HUSL

formData приходит со значением null в Laravel

Ответы (1 шт):