Question

我正在通过ajax请求实现一些文件上传功能。我希望能够在一个ajax调用中发送多个文件，所以我决定使用FormData。

我试图将我的二进制数据字符串直接附加到FormData（并且它可以工作），但Content-Disposition没有filename属性：内容处理：表格数据;名称= “file1的”

w3c说我需要将一个blob对象附加到formdata才能拥有该属性（或者能够使用FormData.append（）的3rd属性设置它。

我写了以下代码：

function uploadAsBinary() {
    var xhr = new XMLHttpRequest();
    var fd = new FormData();

    window.BlobBuilder = window.BlobBuilder || window.WebKitBlobBuilder || window.MozBlobBuilder;
    var bb = new window.BlobBuilder();
    bb.append("this is my binary content");
    var blob = bb.getBlob("text/plain"); 

    fd.append("file1", blob, "file1");

    xhr.open("POST", "/mb/0/", false);
    xhr.send(fd);
}

它与firefox完美搭配，但使用谷歌浏览器（v16和v17），请求有效负载是一个没有内容的formdata：

------WebKitFormBoundaryVkgESMAGtmPMlPZ7
Content-Disposition: form-data; name="file1"; filename="file1"
Content-Type: text/plain


------WebKitFormBoundaryVkgESMAGtmPMlPZ7--

我也尝试通过ArrayBuffer填充blob，结果相同。我已经在网上冲浪了2天，我找不到答案。我在Android上发现了一个未解决的问题（http://code.google.com/p/android/issues/detail?id=22441），但它似乎已经死了。

这是一个真正的铬问题吗？有人对此有所了解，还是应该在铬跟踪器上打开一个问题？

谢谢你的帮助！

Answer 1

对于在这里寻找解决方案的任何人来说，问题是切换到Blob（）而不是BlobBuilder（）为explained here

<强> BlobBuilder（）：

window.BlobBuilder = window.BlobBuilder || window.WebKitBlobBuilder ||
                 window.MozBlobBuilder || window.MSBlobBuilder;
window.URL = window.URL || window.webkitURL;

var bb = new BlobBuilder();
bb.append('body { color: red; }');
var blob = bb.getBlob('text/css');

var link = document.createElement('link');
link.rel = 'stylesheet';
link.href = window.URL.createObjectURL(blob);

document.body.appendChild(link);

<强>斑点（）：

window.URL = window.URL || window.webkitURL;

var blob = new Blob(['body { color: red; }'], {type: 'text/css'});

var link = document.createElement('link');
link.rel = 'stylesheet';
link.href = window.URL.createObjectURL(blob);
document.body.appendChild(link);

Answer 2

tl; dr Chrome开发工具似乎会从数据有效负载预览中剪切文件数据。从BlobBuilder切换到Blob可以解决问题，但有效负载的预览仍然无法显示文件数据;它看起来和你发布的一样（显然是空的）。

您描述的症状具有欺骗性。我遇到了类似的问题（原来这是由于Content-Type的错误重载造成的，但我离题了。）

当我的问题得到解决后，我发现Chrome开发工具显示的是普通键/值数据，而不是文件数据。上传大文件时，我会得到这样的结果：

------WebKitFormBoundaryHyzYwSEV4FAfvi02
Content-Disposition: form-data; name="uploadType"

media
------WebKitFormBoundaryHyzYwSEV4FAfvi02
Content-Disposition: form-data; name="fileupload"; filename="blob"
Content-Type: application/zip


------WebKitFormBoundaryHyzYwSEV4FAfvi02--

注意＆＃34;普通＆＃34;显示数据uploadType=media，而文件数据则不显示。我确认文件正确上传的唯一方法（最终从服务器获取成功代码除外）是在请求完成后在请求标题中查看Chrome开发工具的“网络”标签。它显示content-length: 1023235，比所谓的空文件有效负载建议大得多。

Chrome WebKitBlobBuilder不会附加数据

2 个答案: