javascript - 将 FormData 从 Trigger.io Forge 上传到 Amazon S3

Question

我正在尝试将图像文件从我的 Trigger.io 移动应用程序直接上传到 Amazon S3(参见此处:http://aws.amazon.com/articles/1434)。我可以使用 jQuery 和 FormData 在网络上毫无问题地执行此操作API如下:

var fd = new FormData();
key = 'test.jpg'

fd.append('key', key);
fd.append('acl', 'public-read');
fd.append('Content-Type', file.type);
fd.append('AWSAccessKeyId', key_id);
fd.append('policy', policy_base64);
fd.append('signature', signature);
fd.append('file', file);

$.ajax({
    type: 'POST',
    url: 'https://' + bucket + '.s3.amazonaws.com/',
    processData: false, // Not supported with Trigger
    contentType: false, // Not supported with Trigger
    data: fd,
    success: function(response) {
        // It worked...
    }
});

但是，我无法将其与 Forge 请求 API 一起使用。这是我尝试过的:

forge.request.ajax({
    type: 'POST',
    url: 'https://' + bucket + '.s3.amazonaws.com/',
    fileUploadMethod: 'raw',
    files: [file],
    data: fd,
    headers: { 'Content-Type': 'multipart/form-data', 'x-amz-acl': 'public-read' },
    success: function(response) {
        // It worked...
    }
});

但是，我从亚马逊收到以下错误:

<Code>PreconditionFailed</Code>
<Message>At least one of the pre-conditions you specified did not hold</Message>
<Condition>Bucket POST must be of the enclosure-type multipart/form-data</Condition>

我会规避这个forge.request完全赞成$.ajax , 但我的 file使用 Forge 文件 API 检索，并在 S3 上显示为 [object Object] (我假设是因为它是一个 Forge 文件，而不是来自 HTML 的真实文件对象 <input />)。

那么，我如何使用 FormData 将 Trigger.io 中的文件上传到 Amazon S3？和 Forge API？任何帮助是极大的赞赏!谢谢!

Answer 1

您可以使用 jQuery ajax $.ajax 函数和 FormData JavaScript API 将图像文件从您的 Trigger.io 移动应用程序直接上传到 Amazon S3正如您在网上所做的那样。

您需要执行以下步骤:

1. 使用 forge.file API 检索您的文件。
2. 调用 forge.file.base64 返回文件内容的 base64 值。
3. 从返回的 base64 值创建一个 JavaScript Blob 对象
4. 将 Blob 对象附加到您的 FormData 对象
5. 调用您的$.ajax 函数将文件POST 到Amazon S3

例如，一旦您检索到您的图像文件(第 1 步)，您可以使用以下 uploadImage 函数将您的图像上传到 Amazon S3:

function uploadImage(file, awsAccessKeyId, policy, signature, bucket) {
    forge.file.base64(file, function (base64String) {
      // Create a Blob from a base64 string
      var byteCharacters = atob(base64String);
      var byteNumbers = new Array(byteCharacters.length);
      for (var i = 0; i < byteCharacters.length; i++) {
        byteNumbers[i] = byteCharacters.charCodeAt(i);
      }
      var byteArray = new Uint8Array(byteNumbers);
      var blob = new Blob([byteArray.buffer], {type: "image/jpeg"});

      var fd = new FormData();
      fd.append('key', 'test.jpg');
      fd.append('acl', 'public-read');
      fd.append('Content-Type', 'image/jpeg');
      fd.append('AWSAccessKeyId', awsAccessKeyId);
      fd.append('policy', policy);
      fd.append('signature', signature);    
      fd.append("file", blob);

      $.ajax({
        type: 'POST',
        url: 'http://' + bucket + '.s3.amazonaws.com/',
        processData: false,
        contentType: false,
        data: fd,
        success: function(response) {
          alert('Success uploading photo');
        },
        error: function () {
          alert('Problem uploading photo');
        }
     });    
  });
}