如何仅使用 JavaScript 将 base64 编码的图像数据上传到 S3？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12883871/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to upload base64 encoded image data to S3 using JavaScript only?
提问by Zain Zafar
I have a rails app on Heroku (cedar env). It has a page where I render the canvas data into an image using toDataURL()method. I'm trying to upload the returned base64 image data string directly to s3 using JavaScript (bypassing the server-side). The problem is that since this isn't a file, how do I upload the base64 encoded data directly to S3 and save it as a file there?
我在 Heroku (cedar env) 上有一个 rails 应用程序。它有一个页面，我在其中使用toDataURL()方法将画布数据渲染为图像。我正在尝试使用 JavaScript（绕过服务器端）将返回的 base64 图像数据字符串直接上传到 s3。问题是，由于这不是文件，如何将 base64 编码数据直接上传到 S3 并将其另存为文件？
回答by jamcoupe
I have found a way to do this. After a lot of searching a looking at different tutorials.
我找到了一种方法来做到这一点。经过大量搜索，查看了不同的教程。
You have to convert the Data URI to a blob and then upload that file to S3 using CORS, if you are working with multiple files I have separate XHR requests for each.
您必须将数据 URI 转换为 blob，然后使用 CORS 将该文件上传到 S3，如果您正在处理多个文件，我对每个文件都有单独的 XHR 请求。
I found this function which turns your the Data URI into a blob which can then be uploaded to S3 directly using CORS (Convert Data URI to Blob )
我发现这个函数可以将您的数据 URI 转换为 blob，然后可以使用 CORS（将数据 URI 转换为 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'});
}
回答by chevett
Jamcoope's answer is very good, however the blob constructor is not supported by all browsers. Most notably android 4.1 and android 4.3. There are Blobpolyfills, but xhr.send(...)will not work with the polyfill. The best bet is something like this:
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
回答by Michel
If anyone cares: here is the coffescript version of the function given above!
如果有人关心：这是上面给出的函数的 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'}
回答by user553180
Not sure if OP has already solved this, but I'm working on a very similar feature. In doing a little research, I came across these articles that might be helpful.
不确定 OP 是否已经解决了这个问题，但我正在研究一个非常相似的功能。在做一些研究时，我发现了这些可能有帮助的文章。
