使用者可以上传图片(2)多图上传

Published on:

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

第二部分,完成1.用户可以传图;2.能被看见;3.想传几张传几张!

1.gem
2.uploader
3.model/photo
4.model/job
5.controller
6.html/index
7.html/show
8.html/new
9.html/edit
10 .gitgnore
还是一个文件一步

1.安装gem

gem 'carrierwave'
gem 'mini_magick'

bundle install

2.$rails g uploader avatar

覆盖

class AvatarUploader < 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_fill: [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 model photo job_id:integer avatar:string

app/models/photos.rb

  mount_uploader :avatar, AvatarUploader
  belongs_to :job

4. app/models/jobs.rb

  has_many :photos
  accepts_nested_attributes_for :photos

5.app/controller/admin/jobs_controller.rb

  def new
    @job = Job.new
    @photo = @job.photos.build
  end
  def create
    @job = Job.new(job_params)
    if @job.save
      if params[:photos] != nil
         params[:photos]['avatar'].each do |a|
           @photo = @job.photos.create(:avatar => a)
         end
       end
      redirect_to jobs_path
    else
      render :new
    end
  end
  def update
    @job = Job.find(params[:id])
    if params[:photos] != nil
      @job.photos.destroy_all #need to destroy old pics first
      params[:photos]['avatar'].each do |a|
        @picture = @job.photos.create(:avatar => a)
      end
      @job.update(job_params)
      redirect_to admin_jobs_path
    elsif @job.update(job_params)
      redirect_to admin_jobs_path
    else
      render :edit
    end
  end

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

<%= link_to job_path(job) do %>
 <% if job.photos.present? %>
   <%= image_tag(job.photos[0].avatar.thumb.url, class: "thumbnail") %>
  <% else %>
    <%= image_tag("http://placehold.it/200x200&text=No Pic", class: "thumbnail") %>
  <% end %>
<% end %>

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

<% if @photos.present? %>
  <% @photos.each_with_index do |p, index| %>
    <% if index == 0 %>
      <%= image_tag p.avatar.medium.url %>
      <div style="letter-spacing: -8px">
    <% else %>
      <%= image_tag p.avatar.thumb.url %>
    <% end %>
  <% end %>
    </div>
<% else %>
    <%= image_tag("http://placehold.it/400x400&text=No Pic", class: "thumbnail") %>
<% end %>

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

<%= f.label :avatar %><br>
<%= f.file_field :avatar, :multiple => true, name: "photos[avatar][]" %>

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

<%= f.label :avatar %><br>
<%= f.file_field :avatar, :multiple => true, name: "photos[avatar][]" %>

10. .gitignore

public/uploads

大功告成!

参考:
1.http://zhengzhi1-blog.logdown.com/posts/1370821-implementation-of-upload-multiple-pictures-feature
2.http://yy4ever.logdown.com/posts/1069287
3.http://superlei-blog.logdown.com/posts/1709481

Comments

comments powered by Disqus