0

我想使用 Croppie 插件来裁剪、调整大小并将个人资料图片上传到我的 laravel 应用程序。不幸的是，当我尝试使用 jQuery ajax 上传结果图像时，据我所知，它不包含在提交的请求中。请看下面的代码。我究竟做错了什么？

从我的blade.php：

<link rel="stylesheet" href="{{ URL::asset('node_modules/croppie/croppie.css') }}" />
<script src="{{ URL::asset('node_modules/croppie/croppie.js') }}"></script>

<script type="text/javascript">

    $.ajaxSetup({
    headers: {
        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
    }
    });
    
    
    var mycroppie = $('#profile-image-holder').croppie({
        enableExif: true,
        enableOrientation: true,    
        viewport: {  
            width: 200,
            height: 250,
            type: 'square' 
        },
        boundary: {
            width: 300,
            height: 300
        }
    });
    
    
    $('#image-browser').on('change', function () { 
      var reader = new FileReader();
        reader.onload = function (e) {
          mycroppie.croppie('bind',{
            url: e.target.result
          }).then(function(){
            console.log('jQuery bind complete');
          });
        }
        reader.readAsDataURL(this.files[0]);
    });

    $('#register').on('click', function (ev) {
      mycroppie.croppie('result', {
        type: 'base64',
        size: 'viewport',
        format: 'jpeg'
      }).then(function (img) {
        console.log(img);
        $.ajax({
          url: "{{route('office.guide-reg-step3.store', $hash)}}",
          type: "POST",
          data: {"image":img},
          processData: false,
          contentType: false,
          success:function(data){
                console.log("success");
                console.log(data);
            },
            error: function(data){
                console.log("error");
                console.log(data);
            }
        });
      });
    });
    
    
</script>

这是我打印发送到我的 laravel 应用程序的请求时得到的：

Illuminate\Http\Request {#43 ▼
  #json: null
  #convertedFiles: null
  #userResolver: Closure($guard = null) {#373 ▶}
  #routeResolver: Closure() {#382 ▶}
  +attributes: Symfony\Component\HttpFoundation\ParameterBag {#45 ▶}
  +request: Symfony\Component\HttpFoundation\ParameterBag {#44 ▶}
  +query: Symfony\Component\HttpFoundation\InputBag {#51 ▶}
  +server: Symfony\Component\HttpFoundation\ServerBag {#47 ▶}
  +files: Symfony\Component\HttpFoundation\FileBag {#48 ▼
    #parameters: []
  }
  +cookies: Symfony\Component\HttpFoundation\InputBag {#46 ▶}
  +headers: Symfony\Component\HttpFoundation\HeaderBag {#49 ▶}
  #content: null
  #languages: null
  #charsets: null
  #encodings: null
  #acceptableContentTypes: null
  #pathInfo: "/de/guide-reg-step3/faeb1ade9a29bd12cd3046e446c85435"
  #requestUri: "/de/guide-reg-step3/faeb1ade9a29bd12cd3046e446c85435"
  #baseUrl: ""
  #basePath: null
  #method: "POST"
  #format: null
  #session: Illuminate\Session\Store {#439 ▼
    #id: "Tti26xaxCNLU5tz6p9e9t00WsxbnyxeJs4x0CSCq"
    #name: "gonativeguide_session"
    #attributes: array:3 [▼
      "_token" => "WX2o6FqdPWQGtoOmg8ZJ6nJ1SofgYVbMLPEq21U9"
      "_previous" => array:1 [▶]
      "_flash" => array:2 [▶]
    ]
    #handler: Illuminate\Session\FileSessionHandler {#438 ▶}
    #started: true
  }
  #locale: null
  #defaultLocale: "en"
  -preferredFormat: null
  -isHostValid: true
  -isForwardedValid: true
  -isSafeContentPreferred: null
  basePath: ""
  format: "html"
}

如您所见，文件是空的，也没有“图像”部分......我做错了什么？

谢谢，W。

4

1 回答 1

0

它不是作为文件上传的。它作为参数发送。您可以按如下方式访问数据。

$image = $request-> input('image');
于 2021-09-28T05:55:24.440 回答