javascript - FileReader 在阅读 PDF 时丢失数据

Question

我只能以 JSON 格式将数据发送到服务器，我需要将 PDF 文件与其他 JSON 格式的数据一起发送。我虽然可以像 this solution 中那样用 base64 从中创建一个字符串我在 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 的正文是空的。如果我用原来的 pdf 替换 file，它就会完整显示。所以 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 }),
  });
};