上传从Trigger.io伪造FORMDATA到Amazon S3 [英] Uploading FormData from Trigger.io Forge to Amazon S3

问题描述

我想从我的Trigger.io移动应用程序的映像文件直接上传到Amazon S3（见此处的 http://aws.amazon.com/articles/1434 ）。我能够做到这一点，而不使用jQuery和 FORMDATA API的任何问题，在网络上，如下所示：

I am trying to upload an image file from my Trigger.io mobile app directly to Amazon S3 (see here: http://aws.amazon.com/articles/1434). I'm able to do this on the web without any problems using jQuery and the FormData API as follows:

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...
    }
});

不过，我无法得到这个工作的伪造请求的API。这是我曾尝试：

However, I'm unable to get this working with the Forge request API. This is what I have tried:

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...
    }
});

不过，我从亚马逊收到以下错误：

But, I receive the following error from Amazon:

<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 ，但我的文件被检索使用伪造文件API，只显示了S3上的 [对象的对象] （我假设，因为它是一个伪造的文件，不是从HTML一个真正的文件对象＆LT;输入/＆GT; ）

I would circumvent this forge.request entirely in favor of $.ajax, but my file was retrieved using the Forge File API and just shows up on S3 as [object Object] (I assume because it's a Forge file, not a true file object from an HTML <input />).

那么，怎样才能我Trigger.io上传文件到Amazon S3使用 FORMDATA 和锻造API？任何帮助是极大AP preciated！谢谢！

So, how can I upload a file in Trigger.io to Amazon S3 using FormData and the Forge API? Any help is greatly appreciated! Thanks!

推荐答案

您可以使用jQuery的AJAX $。阿贾克斯函数和 FORMDATA 的JavaScript API上传直接从您的Trigger.io移动应用程序到Amazon S3的图像文件，你在网络上所做的那样。

You are able to use the jQuery ajax $.ajax function and the FormData JavaScript API to upload an image file from your Trigger.io mobile app directly to Amazon S3 as you have done on the web.

您将需要执行以下步骤：

You will need to perform the following steps:

1. 使用 forge.file API检索您的文件。
2. 呼叫 forge.file.base64 来回报您的文件的内容中的Base64值。
3. 从返回的base64值创建一个JavaScript 的Blob 对象
4. 插入的Blob 对象的 FORMDATA 对象
5. 打电话给你的 $。阿贾克斯函数 POST 文件到Amazon S3

1. Retrieve your file using the forge.file API.
2. Call forge.file.base64 to return the base64 value for your file's content.
3. Create a JavaScript Blob object from the returned base64 value
4. Append the Blob object to your FormData object
5. Call your $.ajax function to POST the file to Amazon S3

作为一个例子，一旦检索到你的图片文件（步骤1），可以使用下面的 uploadImage 函数图像上传到Amazon S3：

As an example, once you have retrieved your image file (Step 1), you could use the following uploadImage function to upload your image to 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');
        }
     });    
  });
}

这篇关于上传从Trigger.io伪造FORMDATA到Amazon S3的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！