jquery ajax上传的Croppie图片不在提交的请求中

Question

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

来自我的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应用程序的请求时得到的：

IlluminateHttpRequest {#43 ▼
#json: null
#convertedFiles: null
#userResolver: Closure($guard = null) {#373 ▶}
#routeResolver: Closure() {#382 ▶}
+attributes: SymfonyComponentHttpFoundationParameterBag {#45 ▶}
+request: SymfonyComponentHttpFoundationParameterBag {#44 ▶}
+query: SymfonyComponentHttpFoundationInputBag {#51 ▶}
+server: SymfonyComponentHttpFoundationServerBag {#47 ▶}
+files: SymfonyComponentHttpFoundationFileBag {#48 ▼
#parameters: []
}
+cookies: SymfonyComponentHttpFoundationInputBag {#46 ▶}
+headers: SymfonyComponentHttpFoundationHeaderBag {#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: IlluminateSessionStore {#439 ▼
#id: "Tti26xaxCNLU5tz6p9e9t00WsxbnyxeJs4x0CSCq"
#name: "gonativeguide_session"
#attributes: array:3 [▼
"_token" => "WX2o6FqdPWQGtoOmg8ZJ6nJ1SofgYVbMLPEq21U9"
"_previous" => array:1 [▶]
"_flash" => array:2 [▶]
]
#handler: IlluminateSessionFileSessionHandler {#438 ▶}
#started: true
}
#locale: null
#defaultLocale: "en"
-preferredFormat: null
-isHostValid: true
-isForwardedValid: true
-isSafeContentPreferred: null
basePath: ""
format: "html"
}

正如你所看到的，这些文件是空的；图像"；部分。。。我做错了什么？

谢谢，W.

Answer 1

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

$image = $request-> input('image');