javascript - 为什么 FileEntry 中的 FormData.append 文件不能正确上传？

Question

我正在使用 FormData使用 AJAX 上传文件(用于进度条，尽管为简单起见我省略了该代码):

<form method="post" enctype="multipart/form-data">
  <input type="file" name="file" />
</form>

$(document).ready(function() {
  $(document).on("change", ":file", function() {
    var i;
    for (i = 0; i < this.files.length; i++) {
      var file = this.files[i];
      uploadFile(this.name, file);
    }
  }
}

function uploadFile(inputName, file) {
  var formData = new FormData();
  formData.append(inputName, file);
  $.ajax({
    type: "POST",
    url: "/api/newfile",
    data: formData,
    timeout: 0,
    cache: false,
    contentType: false,
    processData: false
  }) // some code omitted...
}

这很好用。接下来，我在 Apache Cordova 电话应用程序中使用了相同的代码，但我在每个使用 navigator.camera.getPicture 的文件输入下方添加了一个“拍照”按钮作为选项。和 FileEntry.file获取 File 对象并调用相同的 uploadFile 函数:

$(document).ready(function() {
  $("input:file").each(function(index) {
    $("<button class='take_picture_button ui-btn'>Take Picture</button>").insertAfter($(this));
  });

  $(document).on("click", ".take_picture_button", function(e) {
    $inputFileElement = $(this).prev("input:file").first();
    navigator.camera.getPicture(function(fileURI) {
      window.resolveLocalFileSystemURL(fileURI, function(fileEntry) {
        fileEntry.file(function(file) {
          uploadFile($inputFileElement.attr("name"), file);
        });
      });
    });
  });
}); // some code omitted...

这不起作用 - 服务器只是获取“[object Object]”而不是文件。

将 Chrome 开发者工具连接到 Android 应用程序，我在失败案例中看到了这部分请求负载:

------WebKitFormBoundaryThmH13yROUHXJ4jB
Content-Disposition: form-data; name="identity_file[file]"

[object Object]

在工作案例中:

------WebKitFormBoundaryztHB86BlcKBZ9dPX
Content-Disposition: form-data; name="identity_file[file]"; filename="0DuheTR.jpg"
Content-Type: image/jpeg

我想在工作情况下它实际上并没有显示文件负载，但我可以确认它有效。

似乎在失败的情况下，它没有正确地看到 File 对象，因为它没有自动添加文件名属性，也没有自动添加 Content-Type，而且似乎只是为正文做了一个简单的 toString .该应用程序使用 Cordova 6.2.0 构建并在 Android 6.0.1 上运行。

我在两种情况下都在 File 对象上运行了 console.dir，它们看起来差不多，尽管失败情况下的 proto 是 Object 而不是 File - 为什么？

工作:

File
  lastModified: 1458490019474
  lastModifiedDate: Sun Mar 20 2016 09:06:59 GMT-0700 (PDT)
  name: "0DuheTR.jpg"
  size: 152054
  type: "image/jpeg"
  webkitRelativePath: ""
  __proto__: File

失败:

File
  end: 785009
  lastModified: 1469992497000
  lastModifiedDate: 1469992497000
  localURL: "cdvfile://localhost/cache-external/1469992495873.jpg"
  name: "1469992495873.jpg"
  size: 785009
  start: 0
  type: "image/jpeg"
  __proto__: Object

Answer 1

问题已回答here .您需要使用 FileReader 将文件对象进一步转换为 Blob。

我只是在这里引用它的要点:

var formData = new FormData();
window.resolveLocalFileSystemURL(fileURI, function(fileEntry) {
    fileEntry.file(function(file) {
        var reader = new FileReader();
        reader.onloadend = function(e) {
            var imgBlob = new Blob([this.result], {type:"image/jpeg"});
            formData.append('image', imgBlob);
            //post formData here
        };
        reader.readAsArrayBuffer(file);
    });
});