通过JavaScript上传文件:服务器上的文件无效

File upload via JavaScript: Invalid file on server

本文关键字：文件 无效 服务器 通过 JavaScript      更新时间：2023-09-26

我试图上传一个二进制文件(具体来说是PDF)与这个JS-Snippet:

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和在网络上工作不是我的日常工作领域，所以很有可能我做了一些根本性的错误。

我觉得有两件事你可以试试:

  • 检查进程两端的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);
}

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

相关文章：