使用者可以上传图片(1)单图上传

Published on:

ps:关于位置,如果没有特殊说明的话,就是加在合适的位置;覆盖,就是通篇删除,然后粘贴就行了。

第一部分,完成1.用户可以传图;2.能被所有人看见;

一共有10步:
1.gem
2.uploader
3.db
4.model
5.controller
6.html/new
7.html/edit
8.html/index
9.html/show

  1. .gitignore

一个文件一步。

1.安装gem

gem 'carrierwave'
gem 'mini_magick'

bundle install

2.$rails g uploader image

覆盖

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


  process resize_to_fit: [800, 800]

  version :thumb do
    process resize_to_fill: [200,200]
  end

  version :medium do
    process resize_to_fill: [400,400]
  end
  # Provide a default URL as a default if there hasn't been a file uploaded:
  # def default_url
  #   # For Rails 3.1+ asset pipeline compatibility:
  #   # ActionController::Base.helpers.asset_path("fallback/" + [version_name, "default.png"].compact.join('_'))
  #
  #   "/images/fallback/" + [version_name, "default.png"].compact.join('_')
  # end

  # Process files as they are uploaded:
  # process scale: [200, 300]
  #
  # def scale(width, height)
  #   # do something
  # end

  # Create different versions of your uploaded files:
  # version :thumb do
  #   process resize_to_fit: [50, 50]
  # end

  # Add a white list of extensions which are allowed to be uploaded.
  # For images you might use something like this:
  # def extension_whitelist
  #   %w(jpg jpeg gif png)
  # end

  # Override the filename of the uploaded files:
  # Avoid using model.id or version_name here, see uploader/store.rb for details.
  # def filename
  #   "something.jpg" if original_filename
  # end
end

3.$rails g migration add_image_to_job

class AddImageToJob < ActiveRecord::Migration[5.0]
  def change
    add_column :jobs, :image, :string
  end
end

4.app/model/job.rb

mount_uploader :image, ImageUploader

5.app/controller/job_controllers.rb

  private

    def job_params
      params.require(:job).permit(:title, :description, :wage_upper_bound, :wage_lower_bound, :contact_email, :is_hidden, :image)
    end
end

6.app/views/jobs/index.html.erb

<% if @job.image.present? %>
  <%= image_tag(@job.image.medium.url, class: "thumbnail") %>
<% else %>
  <%= image_tag("http://placehold.it/400x400&text=No Pic", class: "thumbnail") %>
<% end %>

7.app/views/jobs/show.html.erb

<% if @job.image.present? %>
  <%= image_tag(@job.image.medium.url, class: "thumbnail") %>
<% else %>
  <%= image_tag("http://placehold.it/400x400&text=No Pic", class: "thumbnail") %>
<% end %>

8.app/views/jobs/new.html.erb

 <%= f.input :image, as: :file %>

9. app/views/jobs/edit.html.erb

<% if @job.image.present %>
<span>image<span><br>
<%= image_tag(@job.image.thumb.url) %>
<% end %>
<%= f.input :image, as: :file %>

10. .gitignore

public/uploads

大功告成!

参考:
1.http://lancaoxiangshe-blog.logdown.com/posts/1671302 超感谢伍兰学姐的帮助 拉我出坑TAT
2.https://github.com/megychen/jdstore/commit/7025e95ad43c66905882f21e65741b42148ebb35

Comments

comments powered by Disqus