Question

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

我插入Croppie来帮助解决这个问题。在表单提交上，我从Croppie获取裁剪后的图像blob，将它们转换为文件，将文件附加到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);
  })
}

张贴到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 ......

任何人都可以看到问题所在，或者告诉我如何进一步调试？

谢谢！

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

0 个答案: