Question

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

Answer 1

我找到了一种方法。经过大量的搜索，看了不同的教程。

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

我找到了这个函数，它将数据URI转换为blob，然后可以使用CORS直接上传到S3（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

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

Answer 3

如果有人关心：这是上面给出的函数的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

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

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

4 个答案: