将 Cordova camera.getPicture 文件传递​​到 AWS S3 (JS SDK)

Question

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

过去，我在 'example uses the HTML5 File API to upload a file on disk to S3' 部分下有 used the HTML File API to create my S3 params, and been able to pass the file object. I can't directly link to how you do this, but there is an example on this page。

但是此文件尚未由输入元素插入，因此我无法访问 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);
      }
   }
}

这个过程有效，但是：

1. 我必须通过 btoa 使用 _result（这是一个 base64），这意味着...
2. 速度很慢。
3. It results in larger file sizes than I should need
4. 还要求我使用getObject instead of getSignedURL
5. 当我得到每个对象时，我必须将它放入 atob 这意味着...
6. 如果我有多个对象让事情变得很慢

我想做的是发送实际的文件对象而不是弄乱这个 base64。或者，我会采用 better/smarter/faster 方式来处理 base64 到 S3 的过程。

Answer 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

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

可以在 Cordova Blog - Transition off of cordova-plugin-file-transfer

找到更多信息