[英]How to save base64 image in Blob with Carrierwave in Rails4?
就像本教程中描述的那樣,我將畫布轉換為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
更新信息:
這些是我的ajax帖子請求的參數:
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">}
這些是標准文件上傳的參數:
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)
我只想添加,您可以在附加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
您將允許的文件類型列入白名單。 默認情況下,Carrierwave將嘗試通過文件擴展名確定文件類型 - 由於這實際上是Blob對象,因此未傳遞。 因此,您收到有關文件“類型”的驗證錯誤。 要解決此問題,只需為blob對象附加預期的文件擴展名:
if params[:image].try(:original_filename) == 'blob'
params[:image].original_filename << '.png'
end
Image.create!(image: params[:image])
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.