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

Question

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

Answer 1

我找到了一种方法来做到这一点.经过大量的搜索,看了不同的教程.

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

我找到了这个函数,它将你的数据URI变成一个blob,然后可以使用CORS直接上传到S3(将数据URI转换为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'});
}

这是一个关于直接上传到S3的好教程,您需要自定义代码以允许blob而不是文件.

Answer 2

Jamcoope的答案非常好,但所有浏览器都不支持blob构造函数.最值得注意的是android 4.1和android 4.3.有Blobpolyfill,但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