rails carrierwave -图像url保存在数据库中，但文件未保存

Question

我有一个表单，我使用cropit.js来裁剪图像。按钮是onclick调用jquery函数，该函数获取裁剪(裁剪图像)的结果，并使用ajax将其推送到控制器。在这里它似乎工作，但当我这样做，一切正常，我没有看到任何错误，但结果是url是存储在数据库中的文件名，但文件本身并没有存储在默认的上传目录这里是我的模型

 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

这是我提出的finally...the问题的解决方案，我必须将文件作为blob发布，而不是作为base64代码。我在stackoverflow上找到了函数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" );
                     });
            };