ajax调用时上传空白PDF答案

【问题标题】：Blank PDF upload on ajax callajax调用时上传空白PDF
【发布时间】：2016-04-12 17:44:10
【问题描述】：

我正在尝试使用 ajax 上传 PDF。 Ajax 调用被发送到上传文件的 API（它是由客户端编写的 REST API，我在这里无法提及。）。这是我的代码：

    var settings = {
        beforeSend: function(xhrObj){
            xhrObj.setRequestHeader('Access-Control-Allow-Headers', '*');
            xhrObj.setRequestHeader("Cache-Control", "no-cache");
            xhrObj.setRequestHeader("Content-Type","application/octet-stream; charset=UTF-8");
            xhrObj.setRequestHeader("Accept","application/json;odata=verbose");
            xhrObj.setRequestHeader("Content-Transfer-Encoding", "base64");
            xhrObj.setRequestHeader("Authorization", self.makeAuth());
            xhrObj.setRequestHeader('Access-Control-Allow-Origin', '*');
        },
        async: false,
        processData: false,
        cache: false,
        crossDomain: true,
        url: url,
        method: "POST",
        data: file
    };

    $.ajax(settings).done(function (response) {
        alert(response);
    });

我得到的回应是：

{"validRequest":true,"RequestMessage":"Success","EntityName":"Asset","EntityId":"004-e9cb6087-b365-4ab7-ba76-0ad65b4133e7","URL":"","APIVersion":"1.0.0"}

并且在 PDF 上传调用被转移以获取 PDF 链接之后。如下：

     var settings = {
        beforeSend: function(xhrObj){
            xhrObj.setRequestHeader("Content-Type","application/json");
            xhrObj.setRequestHeader("Accept","application/json");
            xhrObj.setRequestHeader("Authorization", self.makeAuth());
        },
        "async": true,
        "crossDomain": true,
        "url": url,
        "method": "POST",
        data: JSON.stringify({
            "CampaignName":"",
            "AssetType":"PDF",
            "Location":"Existing",
            "AssetId":assetId,
            "WebLink":"",
            "PDFName": fileName,
            "EmailAddress":email,
            "Notifications":"",
            "AssetName":AssetName,
            "AllowDownload":download_pdf,
            "ExternalEmailId": external_email_id
        })
    };

    $.ajax(settings).done(function (response) {
        alert(response);
    });

这个电话给我的回应是：

{"validRequest":true,"RequestMessage":"link_to_pdf","EntityName":"QuickCampaign","EntityId":"015-95f14ab4-f249-4bf5-87d4-d52ce5098c6a","URL":"","APIVersion":"1.0.0"}

我不明白为什么它上传空白 PDF。请帮忙

【问题讨论】：

您可能想提及您正在使用的 API....
它是客户端编写的 REST API，这里我不能提及。
我明白了，如果我们不知道 API 应该如何工作，可能很难提供帮助。 file 的值究竟是什么？你如何获得该值？你确定这是一个有效的 base64 编码字符串吗？
其实我对此一无所知。但是我阅读了有关然后的文章提到PDF文件应该在开始时包含%PDF-1.4，在pdf编码的末尾包含%%EOF。我在chrome浏览器的Request Payload中见过。
如果我上传 4 页的 pdf，它会显示 4 页，但都是空白的。

标签： jquery ajax pdf

【解决方案1】：

根据我们在聊天中的讨论，您正在获取文件并将其转换为：

var file = $('.file')[0].files[0];
fileReader = new FileReader(),
fileReader.onloadend = readSuccess; 
function readSuccess(e) { 
  console.log(e); 
  file_res = e.target.result; 
} 
fileReader.readAsText(file);

.readAsText() 文档中的注释

readAsText 方法用于读取指定 Blob 或 File 的内容。当读取操作完成后，readyState 变为 DONE，触发 loadend，result 属性包含文件内容为文本字符串。

你想要的是.readAsDataURL()，它声明：

readAsDataURL 方法用于读取指定 Blob 或 File 的内容。当读操作完成后，readyState 变为 DONE，并触发 loadend。那时，result 属性包含作为 URL 的数据，将文件的数据表示为 base64 编码的字符串。

您需要将代码更改为类似以下内容：

var file = $('.file')[0];
var fileReader = new FileReader();

fileReader.onload = function () {
    var data = fileReader.result; // this one leaves the `data:application/pdf;base64,` at the beginning 
    $('#data').html(data);
    var base64 = data.replace(/^[^,]*,/, ''); // this one removes that front bit
    $('#base64').html(base64);        
};
fileReader.readAsDataURL(file.files[0]);

请注意，您需要弄清楚您的 API 需要哪种格式，即 - 使用或不使用 data:application/pdf;base64, 并相应地使用该值，请参阅代码中的 cmets。

Here is a jsFiddle showing the difference in the results of each method

【讨论】：