将Cordova camera.getPicture文件传递到AWS S3（JS SDK）

Question

我试图将由Cordova的相机插件创建的图像传递给Amazon Web Service的S3。

过去，我曾使用HTML File API创建我的S3参数，并能够传递文件对象。 我无法直接链接到您的操作方式，但是此页面上有一个示例，在“示例使用HTML5 File API将磁盘上的文件上传到S3”部分下。

但是此文件尚未由输入元素插入，因此我无法访问诸如files[0]之类的文件-Cordova返回该文件为base64或可用文件位置。 因此，我试图弄清楚如何使用Cordova信息来复制该操作。

在这里找到我已经解决的解决方案，它导致以下代码：

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. 结果导致文件大小超出我的需要
4. 它还要求我使用getObject而不是getSignedURL
5. 当我拿到每个物体时，我必须将其通过atob ，这意味着...
6. 如果我有几个物体可以使事情进展缓慢

我想做的是发送实际的文件对象，而不是弄乱此base64 。 或者，我将采用更好/更智能/更快的方式来处理从base64到S3的进程。

Answer 1

我能够使用“ JavaScript画布到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博客上找到更多信息-Cordova-plugin-file-transfer的过渡