使用 AJAX 发布 base64 编码的 PDF 文件

Question

我正在尝试 post 将 base64 编码的 PDF 文件上传到 Zendesk 文件 API 端点，但从 API 返回的文件 URL 显示文件已损坏。

首先，我从单独的 API 调用中收到 PDF 作为 base64 编码的字符串。我们称它为 base64String.

如果我这样做 window.open("data:application/pdf;base64," + base64String) 我可以在我的浏览器中查看 PDF。

现在我正在尝试按照文档 here 通过 API 上传文件。如示例所示，我可以成功完成 cURL 调用。但是，jQuery AJAX 调用会损坏 PDF 文件。

client.request({
  url: '/api/v2/uploads.json?filename=test.pdf',
  type: 'POST',
  data: atob(base64String),
  contentType: 'application/binary'
}).then(function(data) {
  window.open(data.upload.attachment.content_url);  // corrupt file
}, function(response) {
  console.log("Failed to upload file to Zendesk.");
  console.log(response);
});

就像我说的，这会成功，但是当我访问 content_url 时，PDF 不显示。我很确定 POST 请求中的文件已损坏。

我已经尝试将文件作为 base64 字符串上传（没有使用 atob() 解码），但没有成功。

更新

将 base64 字符串转换为 blob 后，我仍然无法查看 PDF。

var blob = base64ToBlob(base64String);
console.log(blob);  // Blob {size:39574, type: "application/pdf"}

client.request({
  url: '/api/v2/uploads.json?filename=test.pdf',
  type: 'POST',
  data: blob,
  processData: false,
  contentType: 'application/pdf'
}).then(function(data) {
  window.open(data.upload.attachment.content_url);  // corrupt file
}, function(response) {
  console.log("Failed to upload file to Zendesk.");
  console.log(response);
});

function base64ToBlob(byteString) {
  // write the bytes of the string to an ArrayBuffer
  var ab = new ArrayBuffer(byteString.length);
  var ia = new Uint8Array(ab);
  for (var i = 0; i < byteString.length; i++) {
    ia[i] = byteString.charCodeAt(i);
  }

  // write the ArrayBuffer to a blob, and you're done
  var blob = new Blob([ab], {type: 'application/pdf'});
  return blob;
};

Answer 1

我了解到 Zendesk 应用程序框架对请求使用 jQuery AJAX 包装器并且不支持 arraybuffer 类型，因此文件已损坏。应用框架团队已解决此问题。

使用 AJAX 发布 base64 编码的 PDF 文件

Posting a base64 encoded PDF file with AJAX

javascript

ajax

binary-data

zendesk-app

zendesk-api