通过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

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

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

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

解决方案是首先将formdata转换为blob：

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，因为Blob.slice（）方法返回一个Blob对象，并且可以附加到slice而不会被字符串转换损坏。