rails carrierwave-图片网址已保存在数据库中，但文件未保存 [英] rails carrierwave - image url saved in db but file not saved

问题描述

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

I have a form where I use cropit.js to crop an image. Button is onclick calling jquery function which takes result of cropit (cropped image) and with ajax push it to controller. Here it seems to work, but when I do this, everything looks ok, I dont see any error but the result is that url is stored in database with file name, but file itself is not stored in default uploads directory here is my model

 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的一部分

and this is jquery part

$('#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" );
                     });

            };

知道为什么文件没有保存在文件夹中吗? 谢谢

any idea why file is not being saved in a folder? thanks

推荐答案

这是我最终做出的解决方案...问题是我不得不将文件发布为Blob，而不是base64代码.我在stackoverflow上找到了dataURItoBlob函数并实现了

here is the solution I made finally...the issue was that I had to post file as a blob, not as base64 code. I've found function dataURItoBlob here on stackoverflow and implemented it

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-图片网址已保存在数据库中，但文件未保存的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！