通过Ajax请求发送文件的Javascript Blob

在Express应用程序中，我有一个使用Ajax PUT请求的简单图片上传器。 但是现在我需要在将图像发送到服务器之前裁剪图像。

我插入Croppie来帮助这个。 在表单提交中，我从Croppie中获取裁剪后的图像blob，将它们转换为文件，将文件附加到Ajax FormData对象，然后将FormData发送到Express。

但是服务器没有收到文件，在Chrome的开发工具中检查PUT请求显示没有文件信息正在发送。

我已经console.logged的斑点和文件，并据我可以告诉他们正在创build正确。

获取blob并将其转换为文件：

var fileList = [] if($croppieContainers.length > 0){ $.each($croppieContainers, function(i){ $(this).croppie('result', { type: 'blob', // Get the blob from the croppie container }).then(function(blob) { let file = new File([blob], "image-" + i, { type: blob.type, lastModifiedDate: new Date(); // Make a file from the blob... }); fileList.push(file) // And push it to fileList }); }); } 

将文件附加到ajaxData：

 if(fileList.length > 0) { $.each('fileList', function(file){ ajaxData.append($input.attr('name'), file); }) } 

张贴到Express：

 $.ajax({ url: $form.attr('action'), type: $form.attr('method'), data: ajaxData, // dataType: 'json', cache: false, contentType: false, processData: false, complete: function() { $form.removeClass('is-uploading'); }, success: function(data) { // Handlers... 

Console.log（blob）返回：

 Blob size:288345 type: "image/png" __proto__: Blob 

和文件：

 File lastModified : 1478972364233 lastModifiedDate : Sat Nov 12 2016 17:39:24 GMT+0000 (GMT) name : "image-0" size : 288345 type : "image/png" webkitRelativePath : "" __proto__ : File 

我尝试过以不同的方式获取文件，但它给出了相同的结果：

  if($croppieContainers.length > 0){ $.each($croppieContainers, function(i){ let file = new File([$(this).croppie('result', { type: 'blob'} )], "image-" + i) ajaxData.append($input.attr('name'),file) }); } 

我注意到，除了在各个阶段的console.logging，以及在开发工具中检查XHR，如何debugging这个…

任何人都可以看到问题是什么，或告诉我如何进一步debugging？

谢谢！