FileReader在阅读PDF时丢失数据

Question

我有限制只以JSON格式向服务器发送数据，我需要在JSON中发送PDF文件和其他表单数据。我虽然可以使用base64创建一个字符串，就像在this solution中我在SO上找到的那样：

let data = {foo: 1, bar: 2};
let reader = new FileReader();
reader.readAsDataURL(pdf);
reader.onload = () => {
  data.file = reader.result;
  $.ajax({type: 'POST', dataType: "json", data: JSON.stringify(data), ...});
}

但碰巧reader.result不包含整个PDF（我是将其保存到文件而不是发送，还是从服务器上取回）。在文本编辑器中，内容是相同的，但二进制编辑器表示缺少某些字节。我的浏览器可以将其加载为pdf并显示标题，但该页面为空白。

我也尝试了reader.readAsBinaryString并使用btoa转换为base64，但结果相同。

修改：CodePen示例：https://codepen.io/jdelafon/pen/eRWLdz?editors=1011

修改：验证，我这样做了：

let reader = new FileReader();
reader.readAsBinaryString(pdf);
reader.onload = () => {
    let blob = reader.result;
    let file = new Blob([blob], {type: 'application/pdf'});
    let fileURL = window.URL.createObjectURL(file);
    // make it display in <embed>
};

pdf的正文是空的。如果我将file替换为原始pdf，则会完全显示。因此，FileReader会在此过程中丢失数据。

有更好的方法吗？这是FileReader的编码问题吗？

我还要像这样使用FormData：

let data = {foo: 1, bar: 2};
let fd = new FormData();
fd.append('file', pdf);
data.file = btoa(fd);
$.ajax({type: 'POST', dataType: "json", data: JSON.stringify(data), ...});

但是现在当我从服务器获取数据时，JS不知道它代表FormData对象，所以我不知道如何将文件恢复以便在浏览器中显示。有可能吗？

Answer 1

当你尝试btoa时，你离成功并不远，除非你不能“btoa-ize”一个FormData。

reader.readAsBinaryString(pdf); // don’t use this! See edit below
reader.onload = () => {
  let b64payload = btoa(reader.result);
  $.ajax({
    type: 'POST',
    dataType: "json",
    data: JSON.stringify({ "file": b64payload }),
  });
}

我不确定为什么readAsDataURL解决方案失败了。

编辑：虽然不确定，但我们怀疑已弃用的readAsBinaryString方法可能是问题的根源。基于readAsDataURL的以下解决方案正在运行：

reader.readAsDataURL(pdf);
reader.onload = () => {
  $.ajax({
    type: 'POST',
    dataType: "json",
    data: JSON.stringify({ "dataURL": reader.result }),
  });
};

Answer 2

Watilin 的回答没有被添加，所以这里是从 Codepen 复制的工作片段：

function onUpload(input) {  
  let originalFile = input.files[0];
  let reader = new FileReader();
  reader.readAsDataURL(originalFile);
  reader.onload = () => {
    let json = JSON.stringify({ dataURL: reader.result });

    // View the file
    let fileURL = JSON.parse(json).dataURL;
    $("#display-pdf").empty();
    $("#display-pdf").append(`<object data="${fileURL}"
      type="application/pdf" width="400px" height="200px">
    </object>`);

    // View the original file
    let originalFileURL = URL.createObjectURL(originalFile);
    $("#display-pdf").append(`<object data="${originalFileURL}"
      type="application/pdf" width="400px" height="200px">
    </object>`)
    .onload(() => {
      URL.revokeObjectURL(originalFileURL);
    });
  };
}

HTML：

<input id="file-input" type="file" onchange="onUpload(this)" />
<div id="display-pdf"></div>