通过 jQuery.ajax 使用 FormData 发布 Blob答案

【问题标题】：POSTing a Blob with FormData via jQuery.ajax通过 jQuery.ajax 使用 FormData 发布 Blob
【发布时间】：2013-08-16 03:19:42
【问题描述】：

我已经看到这个问题被问了很多次，但尽管我尝试了很多次，但我仍然没有看到任何结果：

如何将 Blob 附加到表单数据并通过 jquery 发布？

var reader = FileReader(); 
reader.readAsBinaryString(f);
reader.onload = function() {
    var slice = reader.result.slice(0,100, {type: "application/octet-stream"});

    var formdata = new FormData();
    formdata.append("blobData", slice); // I have verified via console.log(slice) that this has data
    formdata.append("blobName", "Photo");

    send(formdata);
}

function send(data) {
    $.ajax({
        url: "/upload",
        type: "POST",
        data: data,    
        cache: false,
        contentType: false,
        processData: false
    });
}

所有非 blob 键/值都在请求中，甚至 blob 的键...但不包括 blob 数据。

有趣的是，当我使用 Firefox 而不是 Chrome 发布时，我在上面得到了一点数据.. 但不多（这应该是高达 2 MB 的数据......它是 7 个字节）

【问题讨论】：

标签： jquery ajax html

【解决方案1】：

我最近遇到了这个确切的问题并有解决方案。

核心问题是readAsBinaryString传递给reader.onload的reader.result的值是一个字符串，而不是一个blob。听起来很明显，但我也假设我正在处理一个 blob。由于 String 和 Blob 对象都具有切片方法，因此变量 slice 虽然设置了看起来像二进制数据的数据，但仍然只是一个字符串。 String.slice() 方法的工作原理与 Blob.slice() 方法完全相同，只是忽略了第三个参数，这就是为什么你没有注意到真正发生的事情。

根据FormData spec，任何不是 Blob 或 File 对象的值都将转换为字符串。 slice 字符串似乎在第一个非 ASCII 字符处被截断（我只是在猜测确切的原因，但重要的是当字符串附加到 formdata 时肯定会被截断） .

解决方法是先将reader.result转成blob：

reader.onload = function() {
    var blob = new Blob([reader.result]), 
        slice = blob.slice(0,100, {type: "application/octet-stream"});

    var formdata = new FormData();
    formdata.append("blobData", slice);
    formdata.append("blobName", "Photo");

    send(formdata);
}

（数组是 Blob 构造函数的要求）。

现在 slice 是一个 blob，因为 Blob.slice() 方法返回一个 Blob 对象，并且可以附加到 formdata 而不会被字符串转换破坏。

【讨论】：