将 Cordova camera.getPicture 文件传递给 AWS S3（JS SDK）答案

【问题标题】：Passing a Cordova camera.getPicture File to AWS S3 (JS SDK)将 Cordova camera.getPicture 文件传递给 AWS S3（JS SDK）
【发布时间】：2015-09-18 20:52:32
【问题描述】：

我正在尝试将 Cordova 的 camera plugin 创建的图像传递给 Amazon Web Service 的 S3。

过去，我有 used the HTML File API 创建我的 S3 参数，并且能够传递文件对象。我无法直接链接到您如何执行此操作，但 there is an example on this page 在“示例使用 HTML5 文件 API 将磁盘上的文件上传到 S3”部分下。

但是这个文件没有被输入元素插入，所以我不能访问像files[0]这样的东西——这个文件是由 Cordova 作为 base64 或可用文件位置返回的。因此，我试图弄清楚如何使用 Cordova 信息复制该操作。

我使用is found here 解决的解决方案导致以下代码：

function onSuccess(imageData) {
   window.resolveLocalFileSystemURL(imageData, function(fileEntry) {
      fileEntry.file(function(file) {
         var reader = new FileReader();
         reader.onloadend = function(evt) {
            var theBody = btoa(evt.target._result);
            var 3_params = {
               Bucket: 'the-Bucket',
               Key: 'the-Key',
               ContentType: file.type,
               Body: theBody
            }
            ...other S3 SDK code...
         };
         reader.readAsDataURL(file);
      }
   }
}

这个过程有效，但是：

我必须将_result（它是一个base64）通过btoa 这意味着......
速度很慢。
It results in larger file sizes than I should need
还要求我使用getObject 而不是getSignedURL
当我得到每个对象时，我必须把它通过atob 这意味着......
如果我有几个对象让事情变得非常缓慢

我想做的是发送实际的文件对象而不是搞乱这个base64。或者，我会采取更好/更智能/更快的方式来处理 base64 到 S3 的过程。

【问题讨论】：

标签： javascript cordova amazon-s3 cordova-plugins fileapi

【解决方案1】：

我能够使用“JavaScript Canvas to Blob”polyfill 从我的 Base64 创建一个 blob，然后将返回的 Blob 发送到 S3。因为它现在是一个 blob 而不是编码字符串，所以我可以在 s3 APK 中使用 getSignedURL 来引用图像。

上面唯一的变化是：

var theBody = btoa(evt.target._result);

变成

var theBody = window.dataURLtoBlob(evt.target._result);

https://github.com/blueimp/JavaScript-Canvas-to-Blob

【讨论】：

【解决方案2】：

对于那些发现这一点的人来说，自从XMLHttpRequest 中引入的新功能以来，有一个更好的方法，现在我们可以使用阅读器和Blob 作为来源。

现在可以使用FileReader.readAsArrayBuffer 方法编写初始代码并将Blob 对象作为正文源：

function onSuccess(imageData) {
  window.resolveLocalFileSystemURL(imageData, function(fileEntry) {
    fileEntry.file(function(file) {
      var reader = new FileReader();
        reader.onloadend = function(evt) {
          var blob = new Blob([new Uint8Array(this.result)], { type: file.type });
          var 3_params = {
            Bucket: 'the-Bucket',
            Key: 'the-Key',
            ContentType: file.type,
            Body: blob
         }
         ...other S3 SDK code...
       };
       reader.readAsArrayBuffer(file);
     }
   }
 }

【讨论】：