Carrierwave Cloudinary集成Ruby on Rails

Question

我正在嘗試進行某種個人資料圖片上傳，如下所示：用戶可以從計算機上選擇想要上傳的個人資料圖片（ 載波 ），然后他可以根據自己的喜好使用正方形的縱橫比進行裁剪1：1，就像在Whatsapp中一樣（我使用carrierwave-crop-on-fly ），最后將裁剪后的圖片通過Cloudinary上傳到雲中，並將其綁定到模型“用戶”的“圖片”列中。 我按照cloudinary的教程進行了整合

到目前為止，這是我所做的。 這是與cloudinary綁定的上載器：

class AvatarUploader < CarrierWave::Uploader::Base

  include Cloudinary::CarrierWave
  include CarrierWave::MiniMagick
  process crop: [100, 100]

  def public_id
    model.nombre
  end
end

在用戶模型中：

class User < ActiveRecord::Base
  mount_uploader :image, AvatarUploader
  ...

我認為可以在其中更改個人資料照片：

.well
  .row-fluid
    .span8.offset2
      %p
        .inline-block
          = form_for @user, method: :post, url: change_photo_self_url do |f|
            = f.file_field :image
            .hidden#cropbox= f.cropbox :image, width: 300, height: 300
            = f.submit "Crop", class: "btn btn-success blanco"
            ...

（#cropbox在file_field更改時，即在檢查圖像時出現）

最后，在users_controller中

...
    def change_photo
      user = current_user
      user.update_attributes(user_params)
      sign_in(user)
      redirect_to profile_url
    end
    private
      def user_params
        params.require(:user).permit(..., :image)
    end

沒有“裁剪”的情況，一切工作正常。 也就是說，我實現了用戶可以選擇一個圖像然后上傳它，並且一切正常。 但是，當我添加裁剪控件時，它崩潰了。 當我選擇圖像時，會出現裁剪表面，我可以完美地選擇它，但是當我單擊“提交”按鈕“裁剪”時，在達到控制器動作之前就會觸發以下錯誤：

Rack::QueryParser::ParameterTypeError at /change_photo
expected Hash (got Hash) for param `image'

這是通話的參數：

#<Rack::QueryParser::Params:0x396f9f0 @limit=65536, @size=5, @params={"image"=>{:filename=>"140.jpg", :type=>"image/jpeg", :name=>"user[image]", :tempfile=>#<Tempfile:C:/Users/josem/AppData/Local/Temp/RackMultipart20171229-7548-15105ol.jpg>, :head=>"Content-Disposition: form-data; name=\"user[image]\"; filename=\"140.jpg\"\r\nContent-Type: image/jpeg\r\n"}}>

我可能會猜到兩個具有相同名稱的參數可能是一個問題，但是我不知道如何對其進行更改以使其起作用，並且我也不理解為什么“預期的哈希（哈希）”是一個問題

Answer 1

雖然我對“ carrierwave-crop-on-fly”不太熟悉，但您可能需要考慮以不同的方式來完成。 Cloudinary還提供了開箱即用的上載小部件（ https://cloudinary.com/documentation/upload_widget ），它還支持執行客戶端裁剪。 這是您可以測試的基本RoR / CarrierWave / Cloudinary's-Upload-widget示例項目： https : //github.com/taragano/Carrierwave_widget

該項目當前不包括裁剪功能，但可以輕松添加，請參閱提供的文檔頁面。 您可以在小部件上設置的參數之一是cropping_aspect_ratio ，它可能對您有所幫助。

另外，請注意，使用小部件，裁剪將在客戶端完成，這不僅有助於加快上傳速度，而且服務器也不需要處理裁剪。