rails carrierwave - 圖像url保存在分貝，但文件沒有保存

Question

我有一個窗體，我用cropit.js裁剪圖像。按鈕是onclick調用jquery函數，它採用cropit（裁剪圖像）的結果，並與ajax推到控制器。在這裏它似乎工作，但當我這樣做，一切看起來不錯，我沒有看到任何錯誤，但結果是該網址存儲在數據庫中的文件名，但文件本身並不存儲在默認上傳目錄 這裏是我的模型

class Project < ActiveRecord::Base 
    mount_uploader :profile_pic, ProjectProfileUploader 
end 

這裏是我上傳

class ProjectProfileUploader < CarrierWave::Uploader::Base 
    include CarrierWave::RMagick 

    storage :file 

    def store_dir 
    "uploads/#{model.class.to_s.underscore}/#{mounted_as}/#{model.id}" 
    end 

    version :resized do 
    process :resize_to_fill => [800,506] 
    end 

end 

這裏是我的控制器

def saveprofilepic 

    @p=Project.find(params[:id]) 
    @p.profile_pic = (params[:data]) 
    respond_to do |format| 
    if @p.save 

     format.html { redirect_to @p, notice: 'Project was successfully updated.' } 
     format.json { render :show, status: :created, location: @p } 
     else 
     format.html { render :new } 
     format.json { render json: @p.errors, status: :unprocessable_entity } 
     end 
    end 
    end 

這是形式

<%= form_for @project do |f| %> 

          <div class="cropit-preview" id="cropit-preview"></div> 

          <div class="rotation-btns"><span class="icon icon-rotate-left rotate-ccw-btn"><i class="fa fa-arrow-left"></i> 

         </span><span class="icon icon-rotate-right rotate-cw-btn"><i class="fa fa-arrow-right"></i> 

         </span></div> 

          <input type="range" class="cropit-image-zoom-input " /> 

          <%= f.file_field :profile_pic, accept: "image/jpeg, image/jpg, image/gif, image/png", :class=> "cropit-image-input" %> 

         <%= button_tag "Pridaj obrázok", :class=>'btn-u', :onclick=>"getimage()",:type => 'button' %> 

          <% end %> 

，這是jQuery的部分

$('#image-cropper').cropit({ 
     imageState: {src: <% if @project.profile_pic.nil? %>"<%= asset_path('img_empty_800.jpg') %>" <% else %> "<%= @project.profile_pic.url(:resized).to_s %>" <% end %> }}); 
      $('.select-image-btn').click(function() { 
      $('.cropit-image-input').click(); 
     }); 
     // Handle rotation 
     $('.rotate-cw-btn').click(function() { 
      $('#image-cropper').cropit('rotateCW'); 
     }); 
     $('.rotate-ccw-btn').click(function() { 
      $('#image-cropper').cropit('rotateCCW'); 
     }); 

     function getimage(){ 
     var $cropedimage = $('#image-cropper').cropit('export', { 
       type: 'image/jpeg', 
       quality: .9, 
       originalSize: true 
      }); 
     $.ajax({ 
        type: "POST", 
        url: "/saveprofilepic", 
        data: { 
         id: <%= @project.id %>, 
         data: $cropedimage} 
         }) 
        .done(function (msg) { 
        alert("Obrázok bol nahratý na server"); 
        }); 

      }; 

爲什麼文件不被保存在一個文件夾中的任何想法？ 謝謝

Answer 1

這是我最終做出的解決方案......問題是我不得不將文件發佈爲blob，而不是base64代碼。我發現功能dataURItoBlob這裏計算器和實現它

function getimage(){ 
     var $cropedimage = $('#image-cropper').cropit('export', { 
       type: 'image/jpeg', 
       quality: .9, 
       originalSize: true 
      }); 


     function dataURItoBlob(dataURI) { 
    // convert base64/URLEncoded data component to raw binary data held in a string 
    var byteString; 
    if (dataURI.split(',')[0].indexOf('base64') >= 0) 
     byteString = atob(dataURI.split(',')[1]); 
    else 
     byteString = unescape(dataURI.split(',')[1]); 

    // separate out the mime component 
    var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0]; 

    // write the bytes of the string to a typed array 
    var ia = new Uint8Array(byteString.length); 
    for (var i = 0; i < byteString.length; i++) { 
     ia[i] = byteString.charCodeAt(i); 
    } 

    return new Blob([ia], {type:mimeString}); 
} 

    var filedata=dataURItoBlob($cropedimage); 


     var fd = new FormData(); 
     fd.append('data', filedata, "project-" + <%= @project.id %> + "-profile-pic.jpg"); 
     fd.append('id', <%= @project.id %>); 
      $.ajax({ 
        type: "POST", 
        url: "/saveprofilepic", 
        data: fd, 
        processData: false, 
        contentType: false, 
        cache: false     
         }) 
        .done(function (msg) { 
        alert("Obrázok bol nahratý na server"); 
        }); 
      };