jquery - 通过 jQuery.ajax 使用 FormData 发布 Blob

Question

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

如何附加一个 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 个字节)

Answer 1

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

核心问题是readAsBinaryString传递给reader.onload的reader.result的值是字符串，不是blob。听起来很明显，但我还假设我正在处理一个 blob。由于 String 和 Blob 对象都有一个 slice 方法，变量 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 而不会被字符串转换破坏。