19

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

4

4 回答 4

29

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

您必须将数据 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 而不是文件。

于 2013-01-07T14:18:50.450 回答
5

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
于 2015-04-06T13:26:40.070 回答
3

如果有人关心：这是上面给出的函数的咖啡脚本版本！

  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'}
于 2014-07-03T09:52:21.093 回答
1

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

于 2012-10-24T07:39:49.473 回答