如何在Rails4中使用Carrierwave在Blob中保存base64图像？

就像this Tutorial中所描述的那样，我将画布转换为DataUrl，并将此DataUrl转换为Blob。然后我发出ajax发布请求，并希望使用Carrierwave将图像保存在数据库中。如何在Rails4中使用Carrierwave在Blob中保存base64图像？

这是我的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

更新的信息：

这些是我的AJAX POST请求的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)

来源

2014-02-11 crispychicken

如果您分配'PARAMS发生了什么[：图像]'到carrierwave安装的属性？ – PinnyM

所以我做了'Image.create（image：params [：image]）'，但它回滚事务... – crispychicken

什么错误导致它回滚？您可以使用'Image.create！（...）'（带有感叹号）来强制引发异常。我在帖子中看到的唯一主要区别是上传文件缺少扩展名（名为“blob”）。你可以通过在将'.png'传递给'create'方法之前在文件名（和original_filename）上加上''来解决这个问题。 – PinnyM

您白名单允许的文件类型。默认情况下，Carrierwave会尝试通过文件扩展名来确定文件类型 - 由于这实际上是一个Blob对象，所以不会被传递。因此，你会得到关于文件“类型”的验证错误。为了解决这个问题，只需追加有望文件扩展名BLOB对象：

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

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

来源

2014-02-11 18:08:25 PinnyM

感谢您的反馈 - 更新。 – PinnyM

只是自己实现了。这太棒了。谢谢。 –

我只是想补充一点，你可以在你的附加BLOB在视图中添加的文件类型。

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

来源

2015-04-09 03:32:29

如何在Rails4中使用Carrierwave在Blob中保存base64图像？

回答

相关问题