javascript - Cloudinary cl_image_upload 与 cl_image_upload_tag

标签 javascript ruby-on-rails-4 carrierwave cloudinary

我正在尝试启用从浏览器到cloudinary的直接图像上传。我遇到的问题是,根据以下语法,图像未上传。

<%= form_for(@product_image) do |f| %>
  <div class="field">
    <%= f.cl_image_upload(:image) %>
  </div>
  <%= f.submit %>
<% end %>

如果我替换这个 block

<%= f.cl_image_upload(:image) %>

<%= cl_image_upload_tag("product_image[image]") %>

上传仍然没有发生。但是,如果我将它们放在一起,那么两者都会上传。

我比较了 2 个 cloudinary 辅助方法生成的 html,它们生成了完全相同的 html 代码。查看这 2 个辅助方法的代码,似乎其中一个方法正在调用另一个方法。

def cl_image_upload(object_name, method, options={})
  cl_image_upload_tag("#{object_name}[#{method}]", options)
end

def cl_image_upload_tag(field, options={})
  html_options = options.delete(:html) || {}
  if options.delete(:multiple)
    html_options[:multiple] = true
    field = "#{ field }[]" unless field.to_s[-2..-1] == "[]"
  end

  tag_options = html_options.merge(:type=>"file", :name=>"file",
    :"data-url"=>cl_upload_url(options),
    :"data-form-data"=>cl_upload_tag_params(options),
    :"data-cloudinary-field"=>field,
    :"class" => [html_options[:class], "cloudinary-fileupload"].flatten.compact
  ).reject{|k,v| v.blank?}
  content_tag("input", nil, tag_options)
end

如果我真的只想使用一个 block <%= f.cl_image_upload(:image) %>,那么我还必须添加额外的 javascript

$('.cloudinary-fileupload).cloudinary_fileupload();

您认为,使用 Carrierwave 直接从浏览器上传到 cloudinary 的最佳方式是什么?

最佳答案

Cloudinary 有一个完全工作的示例项目,其中包括使用 jQuery 库的客户端上传,包括 CarrierWave 集成。您可以看一下并尝试一下: https://github.com/cloudinary/cloudinary_gem/tree/master/samples/photo_album

关于javascript - Cloudinary cl_image_upload 与 cl_image_upload_tag,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24622764/

相关文章:

ruby-on-rails - Rails - Carrierwave 进程抛出 ArgumentError : no images in this image list

ruby - 未显示载波错误消息

ruby-on-rails-4 - 将回形针图像复制到 Rails 4 中的新记录

ruby-on-rails - 在 rails 3 和 rails 4.1 之间共享 cookie

Javascript 在 div createElement 中创建 5 个 img

javascript - 当光标位于它前面的位置绝对元素上时,能够在底层元素内滚动

activerecord - 设置和测试以防止 ActiveRecord 中的重复多对多关系

ruby-on-rails-3 - Heroku 上传到 S3 需要太多时间(载波和雾)

JavaScript 字谜比较

javascript - 在请求 header 中设置基本授权详细信息