Javascript Blob到文件/通过Ajax请求发送文件

Javascript Blob到文件/通过Ajax请求发送文件,javascript,jquery,ajax,node.js,express,Javascript,Jquery,Ajax,Node.js,Express,在一个Express应用程序中,我有一个简单的图像上传程序,它使用Ajax PUT请求工作得非常好。但现在我需要在将图像发送到服务器之前对其进行裁剪 我接通了电源以帮助解决这个问题。在FormSubmit上,我从Croppie获取裁剪过的图像块,将它们转换为文件,将文件附加到Ajax FormData对象,并将FormData发送到Express 但是服务器没有接收和发送文件,并且在Chrome的开发工具中检查PUT请求表明没有发送任何文件信息 我已经记录了blob和文件,据我所知,它们是正确创

在一个Express应用程序中,我有一个简单的图像上传程序,它使用Ajax PUT请求工作得非常好。但现在我需要在将图像发送到服务器之前对其进行裁剪

我接通了电源以帮助解决这个问题。在FormSubmit上,我从Croppie获取裁剪过的图像块,将它们转换为文件,将文件附加到Ajax FormData对象,并将FormData发送到Express

但是服务器没有接收和发送文件,并且在Chrome的开发工具中检查PUT请求表明没有发送任何文件信息

我已经记录了blob和文件,据我所知,它们是正确创建的

获取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);
  })
}
邮寄至快递:

$.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)返回:

和文件:

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和在dev工具中检查XHR之外,我还知道如何调试它

有没有人能看到问题所在,或者告诉我如何进一步调试

谢谢你

  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)
    });
  }