读取PDF时FileReader丢失数据 [英] FileReader losing data when reading PDF

问题描述

我有仅以JSON格式将数据发送到服务器的约束，并且我需要与JSON中的其他表单数据一起发送PDF文件.我虽然可以使用base64从中创建一个字符串，例如在此解决方案在SO上找到的中.

I have the constraint of sending data to a server in JSON format only, and I need to send a PDF file together with other form data in the JSON. I though I could make a string from it with base64 like in this solution I found on 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，并显示标题，但页面空白.

But it happened that reader.result does not contain the whole PDF (whether I save it to file instead of sending, or get it back from the server). In a text editor the content is the same, but a binary editor says that some bytes are missing. My browser can load it as a pdf and the title shows, but the page is blank.

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

I also tried reader.readAsBinaryString and transform to base64 myself with btoa, but same result.

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

Edit: CodePen example: https://codepen.io/jdelafon/pen/eRWLdz?editors=1011

编辑:进行验证，我这样做是

Edit: to verify, I did this:

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在此过程中会丢失数据.

The body of the pdf is empty. If I replace file by the original pdf, it gets displayed entirely. So FileReader loses data in the process.

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

Is there a better way? Is it an encoding issue with FileReader?

我也想像这样使用FormData:

I also though about using FormData like this:

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对象，因此我不知道如何取回文件以在浏览器中显示.有可能吗?

But now when I fetch the data back from the server, JS has no idea that it represents a FormData object, so I don't know how to get the file back for display in a browser. Is it possible?

推荐答案

尝试btoa时，您与成功相距不远，除了无法自动化" FormData.

You weren’t far from succeeding when you tried btoa, except you can’t "btoa-ize" a 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解决方案失败.

I’m not sure why the readAsDataURL solution failed though.

编辑:尽管不确定，但怀疑已弃用的readAsBinaryString方法可能是问题的根源.以下基于readAsDataURL的解决方案正在工作:

although not sure, it’s been suspected that the deprecated readAsBinaryString method might be the source of the problem. The following solution, based on readAsDataURL, is working:

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

这篇关于读取PDF时FileReader丢失数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！