通过 JavaScript 上传文件：服务器上的文件无效答案

【问题标题】：File upload via JavaScript: Invalid file on server通过 JavaScript 上传文件：服务器上的文件无效
【发布时间】：2016-11-08 06:00:47
【问题描述】：

我正在尝试使用此 JS-Snippet 上传二进制文件（具体为 PDF）：

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 的 Content-Length，所以我相当肯定，这是在客户端引起的问题。
发送纯文本文件完全没有问题，它们完全按照应有的方式到达。

由于编写 JavaScript 和在网络上工作不是我日常的工作领域，我很可能做错了什么。

【问题讨论】：

标签： javascript java html file-upload

【解决方案1】：

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

检查进程两端的 MIME 类型，如果它以某种方式被破坏，你就有答案了
您的上传内容被包装到 XMLHttprequest 中 - 您可能必须手动进行 Base64 编码/解码，以摆脱 PDF 中的本机字节表示

希望对你有所帮助，祝你好运！

【讨论】：

【解决方案2】：

我找到了解决方案：在发送数据之前使用 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);
}

我写这篇文章是为了让遇到同样问题的人知道我的解决方案。

【讨论】：