Rails4에서 Carrierwave로 Blob의 base64 이미지를 저장하는 방법은 무엇입니까?

this Tutorial에 설명 된 것과 같이 캔버스를 DataUrl로 변환하고이 DataUrl을 Blob로 변환합니다. 그런 다음 Ajax 게시 요청을하고 Carrierwave를 사용하여 데이터베이스에 이미지를 저장하려고합니다.Rails4에서 Carrierwave로 Blob의 base64 이미지를 저장하는 방법은 무엇입니까?

이 내 JS 코드 : 다음 이미지 GET의 저장하지만 물론하지 carrierwave을 통해, 내 컨트롤러에 다음 코드를 추가 할 때

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'}); 
}

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

업데이트 정보 :

이 내 아약스 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')이 누락되었다는 것입니다. 파일 이름 (및 original_filename)에'.png'을 추가하여'create' 메소드에 전달함으로써이를 고칠 수 있습니다. – 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

그냥 직접 구현했습니다. 너무 좋았어요. 고맙습니다. –

당신의 방울을 추가하는 동안, 당신은 당신의보기에서 파일 형식을 추가 할 수 있습니다.

// 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 이미지를 저장하는 방법은 무엇입니까?

답변

관련 문제