developer tip

Carrierwave를 사용한 Rails 4 다중 이미지 또는 파일 업로드

optionbox 2020. 9. 13. 10:22
반응형

Carrierwave를 사용한 Rails 4 다중 이미지 또는 파일 업로드


Rails 4 및 CarrierWave를 사용하여 파일 선택 창에서 여러 이미지를 업로드하려면 어떻게해야합니까? 나는 post_controllerpost_attachments모델이 있습니다. 어떻게 할 수 있습니까?

누군가 예를 들어 줄 수 있습니까? 이것에 대한 간단한 접근 방식이 있습니까?


이것은 처음부터 레일 4의 반송파를 사용하여 여러 이미지를 업로드하는 솔루션입니다.

또는 작동하는 데모를 찾을 수 있습니다. Multiple Attachment Rails 4

수행하려면 다음 단계를 따르십시오.

rails new multiple_image_upload_carrierwave

gem 파일에서

gem 'carrierwave'
bundle install
rails generate uploader Avatar 

포스트 스캐 폴드 만들기

rails generate scaffold post title:string

post_attachment 스캐 폴드 만들기

rails generate scaffold post_attachment post_id:integer avatar:string

rake db:migrate

post.rb에서

class Post < ActiveRecord::Base
   has_many :post_attachments
   accepts_nested_attributes_for :post_attachments
end

post_attachment.rb에서

class PostAttachment < ActiveRecord::Base
   mount_uploader :avatar, AvatarUploader
   belongs_to :post
end

post_controller.rb에서

def show
   @post_attachments = @post.post_attachments.all
end

def new
   @post = Post.new
   @post_attachment = @post.post_attachments.build
end

def create
   @post = Post.new(post_params)

   respond_to do |format|
     if @post.save
       params[:post_attachments]['avatar'].each do |a|
          @post_attachment = @post.post_attachments.create!(:avatar => a)
       end
       format.html { redirect_to @post, notice: 'Post was successfully created.' }
     else
       format.html { render action: 'new' }
     end
   end
 end

 private
   def post_params
      params.require(:post).permit(:title, post_attachments_attributes: [:id, :post_id, :avatar])
   end

views / posts / _form.html.erb에서

<%= form_for(@post, :html => { :multipart => true }) do |f| %>
   <div class="field">
     <%= f.label :title %><br>
     <%= f.text_field :title %>
   </div>

   <%= f.fields_for :post_attachments do |p| %>
     <div class="field">
       <%= p.label :avatar %><br>
       <%= p.file_field :avatar, :multiple => true, name: "post_attachments[avatar][]" %>
     </div>
   <% end %>

   <div class="actions">
     <%= f.submit %>
   </div>
<% end %>

모든 게시물에 대한 첨부 파일 및 첨부 파일 목록을 편집합니다. views / posts / show.html.erb에서

<p id="notice"><%= notice %></p>

<p>
  <strong>Title:</strong>
  <%= @post.title %>
</p>

<% @post_attachments.each do |p| %>
  <%= image_tag p.avatar_url %>
  <%= link_to "Edit Attachment", edit_post_attachment_path(p) %>
<% end %>

<%= link_to 'Edit', edit_post_path(@post) %> |
<%= link_to 'Back', posts_path %>

첨부 파일 보기 /post_attachments/_form.html.erb 편집을위한 양식 업데이트

<%= image_tag @post_attachment.avatar %>
<%= form_for(@post_attachment) do |f| %>
  <div class="field">
    <%= f.label :avatar %><br>
    <%= f.file_field :avatar %>
  </div>
  <div class="actions">
    <%= f.submit %>
  </div>
<% end %>

post_attachment_controller.rb 에서 업데이트 방법 수정

def update
  respond_to do |format|
    if @post_attachment.update(post_attachment_params)
      format.html { redirect_to @post_attachment.post, notice: 'Post attachment was successfully updated.' }
    end 
  end
end

rails 3에서는 강력한 매개 변수를 정의 할 필요가 없으며, rails 4에서는 접근 가능한 속성이 더 이상 사용되지 않기 때문에 모델에서 attribute_accessible을 정의하고 모델을 게시하기 위해 accept_nested_attribute를 정의 할 수 있습니다.

첨부 파일을 편집하기 위해 한 번에 모든 첨부 파일을 수정할 수 없습니다. 첨부 파일을 하나씩 교체하거나 규칙에 따라 수정할 수 있습니다. 여기에서는 첨부 파일을 업데이트하는 방법을 보여 드리겠습니다.


CarrierWave의 문서를 살펴보면 실제로 매우 쉽습니다.

https://github.com/carrierwaveuploader/carrierwave/blob/master/README.md#multiple-file-uploads

사진을 추가하고 싶은 모델로 제품을 예로 들어 보겠습니다.

  1. 마스터 브랜치 Carrierwave를 가져 와서 Gemfile에 추가합니다.

    gem 'carrierwave', github:'carrierwaveuploader/carrierwave'
    
  2. 이미지 배열을 호스팅하기 위해 의도 한 모델에 열을 만듭니다.

    rails generate migration AddPicturesToProducts pictures:json
    
  3. 마이그레이션 실행

    bundle exec rake db:migrate
    
  4. 모델 제품에 사진 추가

    app/models/product.rb
    
    class Product < ActiveRecord::Base
      validates :name, presence: true
      mount_uploaders :pictures, PictureUploader
    end
    
  5. ProductsController의 강력한 매개 변수에 그림 추가

    app/controllers/products_controller.rb
    
    def product_params
      params.require(:product).permit(:name, pictures: [])
    end
    
  6. 양식에서 여러 사진을 허용하도록 허용

    app/views/products/new.html.erb
    
    # notice 'html: { multipart: true }'
    <%= form_for @product, html: { multipart: true } do |f| %>
      <%= f.label :name %>
      <%= f.text_field :name %>
    
      # notice 'multiple: true'
      <%= f.label :pictures %>
      <%= f.file_field :pictures, multiple: true, accept: "image/jpeg, image/jpg, image/gif, image/png" %>
    
      <%= f.submit "Submit" %>
    <% end %>
    
  7. 뷰에서 pictures 배열을 구문 분석하는 이미지를 참조 할 수 있습니다.

    @product.pictures[1].url
    

폴더에서 여러 이미지를 선택하는 경우 순서는 위에서 아래로 가져 오는 정확한 순서가됩니다.


또한 여러 파일 업로드를 업데이트하는 방법을 알아 냈고 조금 리팩토링했습니다. 이 코드는 내 코드이지만 드리프트를 얻습니다.

def create
  @motherboard = Motherboard.new(motherboard_params)
  if @motherboard.save
    save_attachments if params[:motherboard_attachments]
    redirect_to @motherboard, notice: 'Motherboard was successfully created.'
  else
    render :new
  end
end


def update
  update_attachments if params[:motherboard_attachments]
  if @motherboard.update(motherboard_params)
    redirect_to @motherboard, notice: 'Motherboard was successfully updated.'
  else
   render :edit
  end
end

private
def save_attachments
  params[:motherboard_attachments]['photo'].each do |photo|
    @motherboard_attachment = @motherboard.motherboard_attachments.create!(:photo => photo)
  end
end

 def update_attachments
   @motherboard.motherboard_attachments.each(&:destroy) if @motherboard.motherboard_attachments.present?
   params[:motherboard_attachments]['photo'].each do |photo|
     @motherboard_attachment = @motherboard.motherboard_attachments.create!(:photo => photo)
   end
 end

SSR 답변에 대한 몇 가지 사소한 추가 사항 :

accepts_nested_attributes_for 는 부모 개체의 컨트롤러를 변경할 필요가 없습니다. 따라서 수정하려면

name: "post_attachments[avatar][]"

name: "post[post_attachments_attributes][][avatar]"

그러면 다음과 같은 모든 컨트롤러 변경 사항이 중복됩니다.

params[:post_attachments]['avatar'].each do |a|
  @post_attachment = @post.post_attachments.create!(:avatar => a)
end

또한 PostAttachment.new부모 개체 양식에 추가해야합니다 .

views / posts / _form.html.erb에서

  <%= f.fields_for :post_attachments, PostAttachment.new do |ff| %>
    <div class="field">
      <%= ff.label :avatar %><br>
      <%= ff.file_field :avatar, :multiple => true, name: "post[post_attachments_attributes][][avatar]" %>
    </div>
  <% end %>

This would make redundant this change in the parent's controller:

@post_attachment = @post.post_attachments.build

For more info see Rails fields_for form not showing up, nested form

If you use Rails 5, then change Rails.application.config.active_record.belongs_to_required_by_default value from true to false (in config/initializers/new_framework_defaults.rb) due to a bug inside accepts_nested_attributes_for (otherwise accepts_nested_attributes_for won't generally work under Rails 5).

EDIT 1:

To add about destroy:

In models/post.rb

class Post < ApplicationRecord
    ...
    accepts_nested_attributes_for :post_attachments, allow_destroy: true
end

In views/posts/_form.html.erb

 <% f.object.post_attachments.each do |post_attachment| %>
    <% if post_attachment.id %>

      <%

      post_attachments_delete_params =
      {
      post:
        {              
          post_attachments_attributes: { id: post_attachment.id, _destroy: true }
        }
      }

      %>

      <%= link_to "Delete", post_path(f.object.id, post_attachments_delete_params), method: :patch, data: { confirm: 'Are you sure?' } %>

      <br><br>
    <% end %>
  <% end %>

This way you simply do not need to have a child object's controller at all! I mean no any PostAttachmentsController is needed anymore. As for parent object's controller (PostController), you also almost don't change it - the only thing you change in there is the list of the whitelisted params (to include the child object-related params) like this:

def post_params
  params.require(:post).permit(:title, :text, 
    post_attachments_attributes: ["avatar", "@original_filename", "@content_type", "@headers", "_destroy", "id"])
end

That's why the accepts_nested_attributes_for is so amazing.


Here is my second refactor into the model:

  1. Move private methods to model.
  2. Replace @motherboard with self.

Controller:

def create
  @motherboard = Motherboard.new(motherboard_params)

  if @motherboard.save
    @motherboard.save_attachments(params) if params[:motherboard_attachments]
  redirect_to @motherboard, notice: 'Motherboard was successfully created.'
  else
    render :new
  end
end

def update
  @motherboard.update_attachments(params) if params[:motherboard_attachments]
  if @motherboard.update(motherboard_params)
    redirect_to @motherboard, notice: 'Motherboard was successfully updated.'
  else
    render :edit
  end
end

In motherboard model:

def save_attachments(params)
  params[:motherboard_attachments]['photo'].each do |photo|
    self.motherboard_attachments.create!(:photo => photo)
  end
end

def update_attachments(params)
  self.motherboard_attachments.each(&:destroy) if self.motherboard_attachments.present?
  params[:motherboard_attachments]['photo'].each do |photo|
    self.motherboard_attachments.create!(:photo => photo)
  end
end

When using the association @post.post_attachments you do not need to set the post_id.

참고URL : https://stackoverflow.com/questions/21411988/rails-4-multiple-image-or-file-upload-using-carrierwave

반응형