ajax调用上的空白PDF上传

Question

我正在尝试使用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。请帮忙

Answer 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，结果属性将文件内容作为文本字符串包含。

你想要的是.readAsDataURL()，其中指出：

  

readAsDataURL方法用于读取指定Blob或File的内容。当读取操作完成时，readyState变为DONE，并且触发loadend。那时，结果属性包含数据作为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,并使用相应的值，请参阅代码中的注释。

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