如何仅使用JavaScript将base64编码图像数据上传到S3？

Question

我在Heroku（雪松env）上有一个rails应用程序。它有一个页面，我使用toDataURL()方法将画布数据渲染成图像。我试图使用JavaScript（绕过服务器端）将返回的base64图像数据字符串直接上传到s3。问题是由于这不是一个文件，我如何直接将base64编码数据上传到S3并将其保存为文件？

Answer 1

我已经找到一种方法来做到这一点。经过大量的搜索查看不同的教程。

如果您正在处理多个文件，您必须将数据URI转换为blob，然后使用CORS将该文件上载到S3我对每个文件都有单独的XHR请求。

我发现这个功能，将你的数据URI到一个能够直接使用CORS（Convert Data URI to Blob）

function dataURItoBlob(dataURI) { 
    var binary = atob(dataURI.split(',')[1]); 
    var array = []; 
    for(var i = 0; i < binary.length; i++) { 
     array.push(binary.charCodeAt(i)); 
    } 
    return new Blob([new Uint8Array(array)], {type: 'image/jpeg'}); 
} 

Here is a great tutorial on uploading directly to S3, you will need to customise the code to allow for the blob instead of files.

Answer 2

不知道OP是否已经解决了这个问题，但我正在研究一个非常相似的功能。在做一些小小的研究时，我遇到了这些可能有用的文章。

• http://blog.danguer.com/2011/10/25/upload-s3-files-directly-with-ajax/
• http://www.tweetegy.com/2012/01/save-an-image-file-directly-to-s3-from-a-web-browser-using-html5-and-backbone-js/

Answer 3

被上传到S3斑点如果有人关心：这里是coffescript上面给出的函数版本！

convertToBlob = (base64) -> 
    binary = atob base64.split(',')[1] 
    array = [] 
    for i in [0...binary.length] 
     array.push binary.charCodeAt i 
    new Blob [new Uint8Array array], {type: 'image/jpeg'} 

Answer 4

Jamcoope的回答非常好，但blob构造函数不被所有浏览器支持。最显着的是android 4.1和android 4.3。有Blob polyfill，但xhr.send(...)不适用于polyfill。最好的选择是这样的：

var u = dataURI.split(',')[1], 
    binary = atob(u), 
    array = []; 

for (var i = 0; i < binary.length; i++) { 
    array.push(binary.charCodeAt(i)); 
} 

var typedArray = Uint8Array(array); 

// now typedArray.buffer can be passed to xhr.send