Làm cách nào để tải lên dữ liệu hình ảnh được mã hóa base64 lên S3 bằng cách sử dụng JavaScript?

Question

Tôi có một ứng dụng đường ray trên Heroku (cedar env). Nó có một trang nơi tôi hiển thị dữ liệu canvas thành hình ảnh bằng phương pháp toDataURL(). Tôi đang cố tải chuỗi dữ liệu hình ảnh base64 trả về trực tiếp lên s3 bằng JavaScript (bỏ qua phía máy chủ). Vấn đề là vì đây không phải là một tệp, làm thế nào để tôi tải trực tiếp dữ liệu được mã hóa base64 lên S3 và lưu nó dưới dạng tệp ở đó?

Answer 1

Tôi đã tìm thấy một cách để làm điều này. Sau khi tìm kiếm nhiều hướng dẫn khác nhau.

Bạn phải chuyển đổi URI dữ liệu thành blob và sau đó tải tệp đó lên S3 bằng CORS, nếu bạn đang làm việc với nhiều tệp, tôi có các yêu cầu XHR riêng biệt cho mỗi tệp.

tôi thấy chức năng này mà biến bạn URI dữ liệu vào một blob mà sau đó có thể được tải lên S3 trực tiếp sử dụng CORS (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

Không chắc OP có đã giải quyết vấn đề này hay không nhưng tôi đang làm việc trên một tính năng rất giống. Trong một nghiên cứu nhỏ, tôi đã xem các bài viết này có thể hữu ích.

• 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/

Answer 3

Nếu bất cứ ai quan tâm: đây là coffescript phiên bản của hàm được đưa ra ở trên!

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

Câu trả lời của Jamcoope rất tốt, tuy nhiên trình tạo blob không được tất cả các trình duyệt hỗ trợ. Đáng chú ý nhất là android 4.1 và android 4.3. Có Blob polyfills, nhưng xhr.send(...) sẽ không hoạt động với polyfill. Đặt cược tốt nhất là một cái gì đó như thế này:

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