Rails 4 tải lên nhiều hình ảnh hoặc tệp bằng sóng mang

Question 1

Làm cách nào để tải lên nhiều hình ảnh từ một cửa sổ chọn tệp bằng Rails 4 và CarrierWave? Tôi có một post_controllervà post_attachmentsmô hình. Tôi có thể làm cái này như thế nào?

Ai đó có thể cung cấp một ví dụ? Có một cách tiếp cận đơn giản cho điều này?

Question 2

Đây là giải pháp tải lên nhiều hình ảnh bằng sóng mang trong rails 4 từ đầu

Hoặc bạn có thể tìm thấy bản demo đang hoạt động: Multiple Attachment Rails 4

Để làm chỉ cần làm theo các bước sau.

rails new multiple_image_upload_carrierwave

Trong tệp đá quý

gem 'carrierwave'
bundle install
rails generate uploader Avatar

Tạo đoạn đầu bài đăng

rails generate scaffold post title:string

Tạo giàn giáo post_attachment

rails generate scaffold post_attachment post_id:integer avatar:string

rake db:migrate

Trong post.rb

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

Trong post_attachment.rb

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

Trong 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

Trong 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 %>

Để chỉnh sửa tệp đính kèm và danh sách tệp đính kèm cho bất kỳ bài đăng nào. Trong 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 %>

Cập nhật biểu mẫu để chỉnh sửa dạng xem tệp đính kèm / 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 %>

Sửa đổi phương pháp cập nhật trong 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

Trong rails 3 không cần xác định các tham số mạnh và bạn có thể xác định thuộc tính_accessible trong cả mô hình và accept_nested_attribute để đăng mô hình vì thuộc tính có thể truy cập không được dùng trong rails 4.

Để chỉnh sửa tệp đính kèm, chúng tôi không thể sửa đổi tất cả các tệp đính kèm cùng một lúc. vì vậy chúng tôi sẽ thay thế từng tệp đính kèm một hoặc bạn có thể sửa đổi theo quy tắc của mình, Ở đây tôi chỉ hướng dẫn bạn cách cập nhật bất kỳ tệp đính kèm nào.

Question 3

Nếu chúng ta xem qua tài liệu của CarrierWave, điều này thực sự rất dễ dàng.

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

Tôi sẽ sử dụng Sản phẩm làm mô hình mà tôi muốn thêm hình ảnh, làm ví dụ.

Lấy Carrierwave nhánh chính và thêm nó vào Gemfile của bạn:
```
gem 'carrierwave', github:'carrierwaveuploader/carrierwave'
```
Tạo một cột trong mô hình dự định để lưu trữ một mảng hình ảnh:
```
rails generate migration AddPicturesToProducts pictures:json
```
Chạy quá trình di chuyển
```
bundle exec rake db:migrate
```

Thêm hình ảnh vào mô hình Sản phẩm

app/models/product.rb

class Product < ActiveRecord::Base
  validates :name, presence: true
  mount_uploaders :pictures, PictureUploader
end

Thêm hình ảnh vào các thông số mạnh trong ProductsController

app/controllers/products_controller.rb

def product_params
  params.require(:product).permit(:name, pictures: [])
end

Cho phép biểu mẫu của bạn chấp nhận nhiều hình ảnh

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 %>

Trong chế độ xem của mình, bạn có thể tham khảo các hình ảnh phân tích cú pháp mảng ảnh:
```
@product.pictures[1].url
```

Nếu bạn chọn một số hình ảnh từ một thư mục, thứ tự sẽ là thứ tự chính xác mà bạn đang lấy chúng từ trên xuống dưới.

Question 4

Một số bổ sung nhỏ cho câu trả lời SSR :

accept_nested_attributes_for không yêu cầu bạn thay đổi bộ điều khiển của đối tượng mẹ. Vì vậy, nếu để sửa

name: "post_attachments[avatar][]"

đến

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

sau đó tất cả những thay đổi bộ điều khiển như thế này trở nên thừa:

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

Ngoài ra, bạn nên thêm PostAttachment.newvào biểu mẫu đối tượng mẹ:

Trong 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 %>

Điều này sẽ làm dư thừa thay đổi này trong bộ điều khiển của cha mẹ:

@post_attachment = @post.post_attachments.build

Để biết thêm thông tin, hãy xem Rails fields_cho biểu mẫu không hiển thị, biểu mẫu lồng nhau

Nếu bạn sử dụng Rails 5, thì hãy thay đổi Rails.application.config.active_record.belongs_to_required_by_defaultgiá trị từ truethành false(trong config / initializers / new_framework_defaults.rb) do lỗi bên trong accept_nested_attributes_for (nếu không thì accept_nested_attributes_for thường không hoạt động trong Rails 5).

CHỈNH SỬA 1:

Để thêm về tiêu diệt :

Trong các mô hình / post.rb

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

Trong 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 %>

Bằng cách này, bạn đơn giản không cần phải có bộ điều khiển của đối tượng con! Ý tôi là không cần bất kỳ thứ PostAttachmentsControllergì nữa. Đối với controller của đối tượng cha ( PostController), bạn cũng gần như không thay đổi nó - điều duy nhất bạn thay đổi trong đó là danh sách các tham số được liệt kê trong danh sách trắng (bao gồm các tham số liên quan đến đối tượng con) như sau:

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

Đó là lý do tại sao accepts_nested_attributes_forrất tuyệt vời.

Question 5

Ngoài ra, tôi đã tìm ra cách cập nhật tải lên nhiều tệp và tôi cũng đã cấu trúc lại nó một chút. Mã này là của tôi nhưng bạn sẽ bị trôi.

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

Question 6

Đây là bộ tái cấu trúc thứ hai của tôi vào mô hình:

Di chuyển các phương thức riêng tư sang mô hình.
Thay thế @ motherboard bằng self.

Bộ điều khiển:

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

Trong mô hình bo mạch chủ:

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

Question 7

Khi sử dụng kết hợp, @post.post_attachmentsbạn không cần phải đặt post_id.