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

Posted 2023-03-03

【中文标题】如何仅使用 JavaScript 将 base64 编码的图像数据上传到 S3？

【英文标题】：How to upload base64 encoded image data to S3 using JavaScript only?

【发布时间】：2012-10-04 17:35:50

【问题描述】：

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

【参考方案1】：

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

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

我发现这个函数可以将你的数据 URI 变成一个 blob，然后可以使用 CORS (Convert Data URI to Blob ) 直接上传到 S3

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.

【参考方案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

【参考方案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'

【参考方案4】：

不确定 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/