FileReader 读取 PDF 时丢失数据

我的限制是只能以 JSON 格式将数据发送到服务器，并且我需要将 PDF 文件与 JSON 中的其他表单数据一起发送。我虽然可以用 base64 从中创建一个字符串，如下所示这个解决方案 https://stackoverflow.com/a/37699333/2197181我在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并自己转换为base64btoa，但结果相同。

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

Edit: 为了验证，我这样做了：

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 对象，所以我不知道如何取回文件以在浏览器中显示。是否可以？

当你尝试的时候，你离成功就不远了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但解决方案失败了。

Edit:尽管不确定，但有人怀疑已弃用的readAsBinaryString方法可能是问题的根源。以下解决方案基于readAsDataURL， 工作中：

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