Как сохранить изображение base64 в Blob с Carrierwave в Rails4?

Question

Как описано в this Tutorial, я преобразовываю холст в DataUrl и этот DataUrl в Blob. Затем я делаю запрос ajax post и хотел бы сохранить изображение в базе данных с помощью Carrierwave.

Это мой JS код:

uploadButton.on('click', function(e) { 

    var dataURL = mycanvas.toDataURL("image/png;base64;"); 

    // Get our file 
    var file= dataURLtoBlob(dataURL); 

    // Create new form data 
    var fd = new FormData(); 

    // Append our Canvas image file to the form data 
    fd.append("image", file); 

    // And send it 
    $.ajax({ 
    url: "/steps", 
    type: "POST", 
    data: fd, 
    processData: false, 
    contentType: false, 
    }); 
}); 

// Convert dataURL to Blob object 
function dataURLtoBlob(dataURL) { 

    // Decode the dataURL 
    var binary = atob(dataURL.split(',')[1]); 

    // Create 8-bit unsigned array 
    var array = []; 
    for(var i = 0; i < binary.length; i++) { 
    array.push(binary.charCodeAt(i)); 
    } 

    // Return our Blob object 
    return new Blob([new Uint8Array(array)], {type: 'image/png'}); 
} 

Когда я добавить следующий код в мой контроллер, то изображение прибудет Сохранённый но, конечно, не через carrierwave.

File.open("#{Rails.root}/public/uploads/somefilename.png", 'wb') do |f| 
    f.write(params[:image].read) 
end 

Обновлено информация:

Это PARAMS для моего Аякса после запроса:

Parameters: {"image"=>#<ActionDispatch::Http::UploadedFile:0x007feac3e9a8a8 @tempfile=#<Tempfile:/var/folders/0k/q3kc7bpx3_51kc_5d2r1gqcc0000gn/T/RackMultipart20140211-1346-gj7kb7>, @original_filename="blob", @content_type="image/png", @headers="Content-Disposition: form-data; name=\"image\"; filename=\"blob\"\r\nContent-Type: image/png\r\n">} 

И вот PARAMS для стандартной загрузки файла:

Parameters: {"utf8"=>"✓", "image"=>{"image"=>#<ActionDispatch::Http::UploadedFile:0x007feac20c2e20 @tempfile=#<Tempfile:/var/folders/0k/q3kc7bpx3_51kc_5d2r1gqcc0000gn/T/RackMultipart20140211-1346-1ui8wq1>, @original_filename="burger.jpg", @content_type="image/jpeg", @headers="Content-Disposition: form-data; name=\"image[image]\"; filename=\"xy.jpg\"\r\nContent-Type: image/jpeg\r\n">}} 

Если у меня Image.create(params[:image]) У меня есть рулон транзакций назад ...

Ошибка для отката транзакции:

Unprocessable Entity 
ActiveRecord::RecordInvalid (Validation failed: image You are not allowed to upload "" files, allowed types: jpg, jpeg, gif, png) 

Answer 1

Вы в белый список типов файлов разрешено. По умолчанию Carrierwave будет пытаться определить тип файла с помощью расширения имени файла, которое не передается, поскольку на самом деле это объект Blob. Таким образом, вы получаете ошибку проверки файла «type». Чтобы это исправить, просто добавить ожидаемое расширение имени файла для объектов BLOb:

if params[:image].try(:original_filename) == 'blob' 
    params[:image].original_filename << '.png' 
end 

Image.create!(image: params[:image]) 

Answer 2

Я просто хотел бы добавить, вы можете добавить тип файла на вашем взгляде, в то время как добавление вашего блобы.

// Get our file 
    var file = dataURLtoBlob(dataURL); 

    // Create new form data 
    var fd = new FormData(); 

    // Append our Canvas image file to the form data 
    fd.append("image", file, "blob.jpg"); 

Обратите внимание на окончание, когда мы определяем имя файла. Надеюсь, это поможет кому-то.

Источник: https://developer.mozilla.org/en-US/docs/Web/API/FormData/append