javascript - Carrierwave 图片上传不起作用

Question

我正在尝试使用 Carrierwave 通过 Rails 应用程序将 Logo 图像上传到 Amazon s3 存储桶。但我的文件上传没有将文件读取为 HTTP 文件，并将 NULL 添加到数据库中。我无法弄清楚我的代码出了什么问题。

这是我的模型

class StoreLocation < ActiveRecord::Base
  mount_uploader :logo_url, ImageUploader
  ...
end

我的图片 uploader

require 'carrierwave/orm/activerecord'
class ImageUploader < CarrierWave::Uploader::Base

 # Include RMagick or MiniMagick support:
 # include CarrierWave::RMagick
 # include CarrierWave::MiniMagick

  # Choose what kind of storage to use for this uploader:
  #storage :file
  storage :fog

  # Override the directory where uploaded files will be stored.
  # This is a sensible default for uploaders that are meant to be mounted:
  def store_dir
    "uploads/#{model.class.to_s.underscore}/#{mounted_as}/#{model.id}"
  end

  def cache_dir
    # "#{Rails.root}/tmp/uploads"
    Rails.root.join 'tmp/uploads'
  end
  # Add a white list of extensions which are allowed to be uploaded.
  # For images you might use something like this:
  def extension_white_list
    %w(jpg jpeg gif png)
  end

end

来 self 的 store_location/new.html.erb 的片段

<div>
          <input id="picholder" type="file" name = "store_location[logo_url]" style = "width: 0px;">
          <img id="storeLogo" src="/assets/Picupload_bg.png" alt="storeLogo" class = "small_thumb"/>
          <img src="/assets/brws.png" id="brws_logo_file" class = "brws_btn">
        </div>

和我的 javascript store_location.js 来读取文件。

$(document).on('ready page:load', function () {
  jQuery.validator.addMethod("lettersonly", function(value, element) {
        return this.optional(element) || /^[A-Za-z ]+$/i.test(value);
    }, " ");

function readURLImage(filePath) {
  if (filePath.files && filePath.files[0]) {
    var reader = new FileReader();        
    reader.onload = function (e) {
        $('#storeLogo').attr('src', e.target.result);
    }
    reader.readAsDataURL(filePath.files[0]);
  }
}

$("#picholder").change(function(){
    readURLImage(this);
  });

$("#brws_logo_file").click(function () {
    $("#picholder").trigger('click');
  });

});

当我运行这个时，我可以在选择任何图像文件时在表单上看到缩略图，但请求中的参数如下所示:(来自rails日志)

Parameters: {"utf8"=>"✓", "authenticity_token"=>"Q0ejEHG2uzPlSlJ2XF8eC7uVXWs76jtEGfXRNCHgyuc=", "store_location"=>{"store_name"=>"Origins", "first_address"=>"Gulberg", "second_address"=>"", "country"=>"Pakistan", "state"=>"Punjab", "city"=>"Lahore", "zip_code"=>"54000", "phone_no"=>"111674446", "logo_url"=>"b3.jpg"}, "commit"=>"Submit"}
INSERT INTO `store_locations` (`city`, `country`, `created_at`, `first_address`, `logo_url`, `phone_no`, `second_address`, `state`, `store_name`, `updated_at`, `user_id`, `zip_code`) VALUES ('Lahore', 'Pakistan', '2014-12-10 10:33:37', 'Gulberg', NULL, '111674446', '', 'Punjab', 'Origins', '2014-12-10 10:33:37', 1, '54000')

我无法理解为什么 logo_url 只作为文件名出现，它应该像

 "logo_url"=>#<ActionDispatch::Http::UploadedFile:0x00000009b07c88 @tempfile=#<Tempfile:/tmp/RackMultipart20141209-15502-1q6mzyf>, @original_filename="b3.jpg", @content_type="image/jpeg", @headers="Content-Disposition: form-data; name=\"store_location[logo_url]\"; filename=\"b3.jpg\"\r\nContent-Type: image/jpeg\r\n">

在这方面的任何帮助将不胜感激。谢谢。

Answer 1

默认情况下，Carrierwave 有一个方法，即 column_name + _url 用于上传特定列中的远程图像。

例如:

user.logo_url('http://www.example.com/example.png') 会将此图像保存在用户模型的 logo 列中。

将您的列从 logo_url 重命名为 logo，以便直接上传图像而不启动 HTTP 请求。