如何在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圖像？

回答

相關問題