在二进制字符串上编码URIComponent数据

Question

我正在使用 jQuery ajax 获取请求读取二进制文件文件，我在其中接收文件（在我的情况下为 zip 文件）作为字符串返回。一旦我在浏览器中对文件执行了一些操作（而不是修改文件），我需要通过 ajax 将其传输回服务器端点（在这种情况下，使用 express 3 的 nodejs）。我正在尝试通过以下 POST 请求执行此操作，由于需要使用 encodeURIComponent 对我的字符串进行编码，因此我认为我遇到了问题：

var fd = new FormData();
fd.append("filedata", encodeURIComponent(data), "filedata"); // data is my binary string
fd.append("filename", $('#url-input').val().split('/').slice(-1)[0]);
$.ajax({
    type: "POST",
    url: 'endpoint',
    data: fd,
    processData: false,
    contentType: false,
    success: function() {
        alert('save successful');
    }
});

端点包含此代码，它将数据作为缓冲区存储在 mongodb 中：

app.post('/endpoint', function(req, res) {
    var newData = {};
    newData.file = new Mongo.Binary(new Buffer(decodeURIComponent(req.body.filedata), "binary"));
    newData.name = req.body.filename;
    newData.date = moment().format('MMMM Do YYYY, h:mm:ss a');
    database.insert(newData, {safe: true}, function() { console.log('inserted new data'); });
});

这似乎按计划进行，但是，当我稍后检索文件时，它有点损坏。当我将其与十六进制编辑器中的原始值进行比较时，该值接近但不准确，这是两个文件部分的示例：

原始文件：

01 02 54 03 08 5D 08 5D 66 18 61 66 19 1B 67 1C 03 66 01 02 7A 85 14 80 7E 7F 81 82 85 85 80 80 85 5D 80 5D 14 80 14 80 89 8A 81 82 80 80 80 80 80 5D 80 5D 67 66 03 03 6D 6C 11 64 01 02 2E 37 57 85 57 80 85 57 80 57 57 8C 54 85 8C 8C 85 85 80 57 80 57 7A 80 14 80 8C 57 85 57 1A 8C 57 85 57 8C 57 85 18 1B 6D 1C 3E 30 15 57 37 37 6C 66 54 24 57 34 15 57 15 2E 01 2E 02 57 37 54 2C 2D 76 2E 74 77 68 6B 68 68 71 71 74 74 A7 A7 A7 A7 19 19 66 71 19 1A 08 08 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 DD DE 10 EE 6D 8B 7C 01 69 6A 6A 5C 10 21 7C 60 56 CC EE 02 1C 01 BE 8C 8D 8D 8D 44 AC AE 01

来自已发布文件的对应字符串，请注意它仅略有不同：

01 02 54 03 08 5D 08 5D 66 18 61 66 19 1B 67 1C 03 66 01 02 7A FD 14 FD 7E 7F FD FD FD FD FD FD FD 5D FD 5D 14 FD 14 FD FD FD FD FD FD FD FD FD FD 5D FD 5D 67 66 03 03 6D 6C 11 64 01 02 2E 37 57 FD 57 FD FD 57 FD 57 57 FD 54 FD FD FD FD FD FD 57 FD 57 7A FD 14 FD FD 57 FD 57 1A FD 57 FD 57 FD 57 FD 18 1B 6D 1C 3E 30 15 57 37 37 6C 66 54 24 57 34 15 57 15 2E 01 2E 02 57 37 54 2C 2D 76 2E 74 77 68 6B 68 68 71 71 74 74 FD FD FD FD 19 19 66 71 19 1A 08 08 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00

我应该注意我已经尝试在我的代码中使用其他功能，例如客户端上的 btoa 和服务器上的 atob（带有模块），但所有这些都需要使用 encodeURIComponent，我相信这是破坏数据。我还可以通过稍微不同的路线和传统形式的帖子将二进制数据存储在我的 mongodb 中。

有其他人遇到过这个问题吗？

Answer 1

在我最初的问题的其中一个 cmets 中，有人提到我应该尝试使用 blob。我只是将代码改写如下，删除了 jQuery 的使用并使用了 blob：

var xhr = new XMLHttpRequest();
xhr.open('GET', 'endpoint for original binary file', true);
xhr.responseType = 'blob';

xhr.onload = function(e) {
    var data = this.response; // this is a blob

    var reader = new FileReader();
    reader.onload = function() {
        var dataUrl = reader.result;
        var base64 = dataUrl.split(',')[1];

        var fd = new FormData();
        fd.append("filedata", base64, "filedata");
        fd.append("filename", $('#url-input').val().split('/').slice(-1)[0]);

        var request = new XMLHttpRequest();
        request.open("POST", "endpoint");
        request.onload = function (e) {
            if (this.status === 200) {
                alert('sent');
            }
        };
        request.send(fd);
    };
    reader.readAsDataURL(data);
}

除了相关的服务器代码基本相同

 newData.file = new Mongo.Binary(new Buffer(decodeURIComponent(req.body.filedata), "binary"));

变成：

 newData.file = new Mongo.Binary(new Buffer(req.body.filedata, "base64"));

感谢您的问题，绝对帮助引导我找到正确的答案。