[RUBY] Speichern und zeigen Sie mehrere Bilder an

Was Sie implementieren möchten

Die Bildmontagefunktion wurde bereits implementiert, und mehrere Fotos können gespeichert und angezeigt werden.

1. Ändern Sie die Modellzuordnung

Vorher ändern

class Scene < ApplicationRecord
  belongs_to :user
  has_one_attached :image

Kürzung

end

Nach der veränderung

class Scene < ApplicationRecord
  belongs_to :user
  has_many_attached :images

Kürzung

end

2. Controller wechseln

Vorher ändern

class ScenesController < ApplicationController

  def new
    @scene = Scene.new
  end

  def create
    @scene = Scene.new(scene_params)
    if @scene.save
      redirect_to root_path
    else
      render :new
    end
  end
  def show
    @scene = Scene.find(params[:id])
  end

  private
  def scene_params
    params.require(:scene).permit(:name, :user_name, :comment, :image).merge(user_id: current_user.id)
  end
end

Nach der veränderung

class ScenesController < ApplicationController

  def new
    @scene = Scene.new
  end

  def create
    @scene = Scene.new(scene_params)
    if @scene.save
      redirect_to root_path
    else
      render :new
    end
  end
  def show
    @scene = Scene.find(params[:id])
  end

  private
  def scene_params
    params.require(:scene).permit(:name, :user_name, :comment, image: []).merge(user_id: current_user.id)
  end
end

3. Ändern Sie die Ansicht

Post Seite

Vorher ändern

  <%= form_with model: @scene, local: true do |f| %>
   <div class="img-upload">
      <div class="weight-bold-text">
Site-Image
        <span class="indispensable">Verpflichtend</span>
      </div>
      <div class="click-upload">
        <p>
Klicken Sie hier, um die Datei hochzuladen
        </p>
          <%= f.file_field :image, id:"item-image"%>
      </div>
    </div>
Kürzung
<% end %>

Nach der veränderung

 <%= form_with model: @scene, local: true do |f| %>
   <div class="img-upload">
      <div class="weight-bold-text">
Site-Image
        <span class="indispensable">Verpflichtend</span>
      </div>
      <div class="click-upload">
        <p>
Klicken Sie hier, um die Datei hochzuladen
        </p>
          <%= f.file_field :image, multiple: true , id:"item-image"%>
      </div>
    </div>
Kürzung
<% end %>

Seite durchsuchen

Vorher ändern

Kürzung
<%= image_tag image %>
Kürzung

Nach der veränderung

<% @scene.image.each do |image| %>
  <%= image_tag image %>
<% end %>

Mit den oben genannten Änderungen ist es jetzt möglich, mehrere Fotos zu veröffentlichen und anzuzeigen.

Über die Zukunft

Da die Fotos nebeneinander angezeigt werden, sind die Ansichtsdateien in Intervallen angeordnet.