通过JavaScript上载文件：服务器上的文件无效

我正试图上传一个二进制文件（具体为PDF），其中包含以下JS片段：

function uploadFile() {
    var reader = new FileReader();
    var file = document.getElementById('uploadInput').files[0];
    console.log(file.size);
    var xhr = new XMLHttpRequest();

    xhr.open('POST', 'custom?id=upload');
    xhr.setRequestHeader("Content-Type", "application/pdf");
    xhr.overrideMimeType('application/pdf');
    reader.onload = function(evt) {
        xhr.send(evt.target.result);
    };
    reader.readAsBinaryString(file);
}

在服务器端（Java），我接收请求并将文件写入磁盘。
但是当打开PDF时，我得到的不是预期的~3MB，而是~4MB，结果是我只有空白页。

传入请求的头还指定了~4MB的内容长度，因此我相当肯定，是客户端的某个东西造成了问题。
发送纯文本文件一点问题都没有，它们完全按照预期的方式到达。

---

由于编写JavaScript和在web上工作不是我的日常工作领域，很可能我做了一些根本错误的事情。

我怀疑你可以尝试两件事：

• 检查进程两端的MIME类型，如果它以某种方式被损坏，您就有了答案
• 您的上传被包装到一个XMLHttprequest中——您可能需要手动进行Base64编码/解码，以摆脱PDF中的本机字节表示

---

希望这能帮助你，祝你好运

我找到了解决方案：在发送数据之前用Base64显式编码数据，并在接收端对其进行适当解码。

function uploadFile() {
    var reader = new FileReader();
    var file = document.getElementById('uploadInput').files[0];
    console.log(file.size);
    var xhr = new XMLHttpRequest();

    xhr.open('POST', 'custom?id=upload');
    xhr.setRequestHeader("Content-Type", "text/plain; charset=x-user-defined");
    xhr.overrideMimeType('text/plain; charset=x-user-defined');
    reader.onload = function(evt) {
        var encoded = window.btoa(evt.target.result);
        xhr.send(encoded);
    };
    reader.readAsBinaryString(file);
}

我写这篇文章是为了让任何有同样问题的人知道我的解决方案