Question

我有一个表单，我使用cropit.js来裁剪图像。按钮是onclick调用jquery函数，它获取cropit（裁剪图像）的结果，并使用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

这是我最终做出的解决方案......问题是我必须将文件作为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" );
                     });
            };

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

1 个答案: