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

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替换文件,它将完全显示.因此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解决方案失败了.

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

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