[RUBY] Ich habe versucht, die Funktion zum Hochladen mehrerer Bilder in Rails zu implementieren, damit mehrere Bilder für den Beitrag verschoben werden können

1. Funktion zum Hochladen mehrerer Bilder implementiert

Ich habe es so implementiert, dass ich mit Carrierwave mehrere Bilder hochladen kann.

Was ist Trägerwelle?

Carrierwave ist eine Bibliothek, mit der Sie die Bild-Upload-Funktion einfach aus Ihrer Rails-Anwendung implementieren können. Dieses Mal habe ich Carrierwave Version 2.1.0 verwendet.

Wie hast du es benutzt?

Installieren Sie zuerst den Edelstein unten.

Meine App / Gemfile

gem 'carrierwave'
gem 'mini_magick'

Generieren Sie einen Uploader.

rails g upload image

Dadurch wird die folgende Datei generiert: Wenn Sie diese Datei anpassen möchten, fügen Sie die Verarbeitung hinzu.

app/upload/image_upload.rb

Also habe ich die Einstellungen wie folgt vorgenommen.

Meine App /app/upload/image_upload.rb

class ImageUploader < CarrierWave::Uploader::Base

    include CarrierWave::MiniMagick

    process resize_to_fill: [1000, 1000]

    version :thumb do
        process resize_to_fit: [223,223]
    end

    version :swiper do
        process resize_to_fit: [400, 400]
    end
    
    version :thumbnil do
        process resize_to_fit: [100, 100]
    end
    
    storage :file
    
    def store_dir
        "uploads/#{model.class.to_s.underscore}/#{mounted_as}/#{model.id}"
    end
    
     def extension_whitelist
        %w(jpg jpeg gif png)
     end
     
 end

Wie haben Sie die Einstellungen hinzugefügt?

include CarrierWave::MiniMagick

Ich wollte die Größe des Bildes beim Hochladen ändern, also habe ich minimagick installiert. Da es beim Generieren von image_upload.rb als Kommentar beschrieben wird, löschen Sie # und beschreiben Sie es als Verarbeitungscode. minimagick ist eine Ruby-Schnittstelle für imagemagick, ein C-Programm. Auf diese Weise können Sie die Methode zur Größenänderung von Bildern verwenden.

Beim Hochladen wird der folgende Prozess mit 1000 x 1000 Pixel unterbrochen. Anschließend wird eine Version mit dem Namen "Daumen" erstellt und auf 223 x 223 Pixel skaliert. In ähnlicher Weise werden Versionen namens Sweeper und Thumbnil erstellt und auf jede Version skaliert.

• Es ist jedoch nicht wünschenswert, die Version abhängig von der Teamentwicklung zu stark zu erhöhen.

  process resize_to_fill: [1000, 1000]

  version :thumb do process resize_to_fit: [223,223] end

  version :swiper do process resize_to_fit: [400, 400] end

  version :thumbnil do process resize_to_fit: [100, 100] end

Hier werden die Bilder beim Hochladen gespeichert. Die Standardeinstellung ist aufgeführt. Es wird wie "public / uploads / angegebener Modellname / angegebener Modellspaltenname / Modell-ID / Bild und in jeder Version erstelltes Bild" platziert. Wenn Sie es ändern, können Sie es überschreiben.

def store_dir
    "uploads/#{model.class.to_s.underscore}/#{mounted_as}/#{model.id}"
end

Dies wird standardmäßig auch als Kommentar beschrieben, damit es verarbeitet werden kann. Sie können eine Whitelist mit zulässigen Erweiterungen angeben. Durch das Hochladen anderer Erweiterungen als jpg, jpeg, gif und png wird der Datensatz ungültig.

def extension_whitelist
    %w(jpg jpeg gif png)
end

Dies ist das Ende der Erläuterung der Einstellungen. Anschließend werden die übergeordnete Beitragstabelle und die untergeordnete Bildtabelle erstellt. Die Tabelle ist in Beitrag und Bild unterteilt, um mehrere Beiträge zu unterstützen.

$rails g model Post content:text 

$rails g model Image url:string post:reference

Worauf ich hier gestoßen bin, war, dass ich in meinem Fall beim Erstellen des Bildmodells den Typ json behandelt habe. Ursprünglich wollte ich eine Spezifikation erstellen, die mehrere Beiträge zulässt, indem eine Bildspalte in der Beitragstabelle erstellt wird. Da ich sie jedoch geändert habe, um eine neue Bildtabelle zu erstellen und zu speichern, habe ich später gesagt, dass ich mich nicht darum kümmern muss, sie zu einem JSON-Typ zu machen. Mir ist aufgefallen. Wenn Sie hier also mehrere Bilder in einer Tabelle verarbeiten möchten, können Sie daraus einen JSON-Typ machen und ihn so gestalten, dass Sie mehrere Bilder in einem Objektdatensatz verarbeiten können. In meinem Fall habe ich eine andere Tabelle erstellt und als JSON-Typ belassen. Ich empfehle jedoch, sie als Zeichenfolgentyp zu erstellen, sofern Sie keinen bestimmten Grund haben.

Erstellen Sie eine Migrationsdatei und aktualisieren Sie die Datenbank.

$rails db:migrate

Fügen Sie der Modelldatei die folgende Beschreibung hinzu.

Meine App /app/model/image.rb

class Image < ApplicationRecord
    belongs_to :post

mount_uploader: url, ImageUploader # Hängen Sie die Upload-Funktion in die Daten ein, die Sie verwenden möchten. end

Meine App /app/mode/post.rb

class Post < ApplicationRecord
    validates :content, presence: true, length: { maximum: 1000 }
    has_many :images, dependent: :destroy

Wenn Sie "accept_nested_attributes_for: images #post" veröffentlichen, können Sie gleichzeitig Bilder veröffentlichen. end

Hierbei ist zu beachten, dass bei Verwendung von accept_nested_attributes_for die Spalte images_attributes zum Parameter strong hinzugefügt werden muss. Es wird wie folgt sein.

Meine App /app/controller/post_controller.rb

  def new
    @post = Post.new
    @image = @post.images.build
  end
  
  def create
    @post = current_user.posts.new(post_params)
    if @post.save

redirect_to posts_path, Erfolg: "posted" else flash [: risk] = "Buchung fehlgeschlagen" render :new end end

  private
  
  def post_params
    params.require(:post).permit(:content, images_attributes: [:url])
  end

Sie haben jetzt festgelegt, dass mehrere Bilder als Parameter übergeben werden sollen. Lassen Sie uns als Nächstes darüber nachdenken, wie Sie mehrere Bilder in der Ansicht veröffentlichen können. Hier war ich süchtig nach verschiedenen Dingen. In der Methode fields_for wird angegeben, dass mehrere Beiträge veröffentlicht werden können, indem im zweiten Argument multiple: true beschrieben wird. Dies funktioniert jedoch nicht. Als weitere Methode habe ich es so implementiert, dass mehrere Posts mit Javascript erstellt werden können. Dieser Artikel wurde sehr gut geschrieben, daher habe ich ihn als Referenz verwendet. → Qiita Wenn Sie gemäß diesem Artikel festlegen, wird Javascript gestartet und das Programm sollte bei jedem Hochladen ausgeführt werden.

2. Implementiert, damit mit Swipper mehrere Bilder für einen Beitrag verschoben werden können

Was ist Swiper?

Grob gesagt ist es ein Framework, das die Implementierung der Folienfunktion vereinfacht.

Wie hast du es benutzt?

Richten Sie zunächst die Kehrmaschine ein, die in der Anwendung verwendet werden soll. Es gibt verschiedene Methoden, aber ich habe sie mit Garn eingeführt. Die Einführungsmethode und der Inhalt dieses Artikels in Garn waren sehr leicht zu verstehen, daher habe ich ihn als Referenz verwendet. →Qiita

Swiper mit Garn einführen.

$yarn add swiper

$yarn install

Überprüfen Sie package.json, um festzustellen, ob es installiert wurde. Wenn Sie kein Garn installiert haben, installieren Sie das Garn mit dem folgenden Befehl. (Wenn Sie einen Mac verwenden)

$brew installl yarn

Beschreiben Sie nach der Installation Folgendes in application.js und application.scss.

Meine App /app/assets/stylesheets/application.scss

@import "swiper/swiper-bundle";

Meine App /app/assets/javascript/application.js

 //= require swiper/swiper-bundle.js
 //= swiper.js

Erstellen Sie eine swiper.js-Datei und schreiben Sie wie folgt. Mit swiper müssen Sie die Art der Folienmethode schreiben und erstellen, die Sie mit swiper hinzufügen möchten. Wählen Sie Ihre bevorzugte Folienmethode aus der Swiper-Demo und kopieren Sie den js-Code in das folgende Skript! -Initialize Swiper-aus dem Quellcode. Sie müssen das Skript-Tag nicht einschließen. In meinem Fall habe ich eine Folie mit Pagenation / dynamischen Kugeln erstellt, daher sieht es wie folgt aus. Dieser js-Dateiname muss nicht swipe.js sein. Wenn Sie den Dateinamen ändern möchten, ändern Sie auch den in application.js beschriebenen Dateinamen. Demo

Meine App /app/assets/javascript/swiper.js

var swiper = new Swiper(".swiper-container", {
pagination: {
    el: ".swiper-pagination",
    dynamicBullets: true,
    },
});

Jetzt, da wir bereit sind, implementieren wir es tatsächlich im Blick. Da es sich um ein Implementierungsbeispiel mit Pagenation / Dynamic Bullet handelt, überprüfen Sie bitte den Quellcode, wenn Sie eine andere Folienmethode auswählen.

Meine App /app/views/posts/index.html.slim

 .swiper-container.top-carousel
    .swiper-wrapper(style="transform: translate3d(0px, 0px, 0px)")
         - @post.images.each do |img|
            .swiper-slide(style="width: 400px;")
                = link_to post do
                = image_tag img.swiper.url, class: "card-img-top"
     .swiper-pagination

~ Ausgelassen ~

= javascript_include_tag "application"  

Das Wichtigste dabei ist, am Ende = javascript_include_tag "application" zu schreiben. Wenn Sie vergessen, dies zu schreiben, startet die Kehrmaschine nicht. Sie können es in application.html.slim schreiben, aber ich schreibe es nur in den Teil der Seite, für den Sweeper erforderlich ist. Außerdem ruft diese img.url.swiper.url die Sweeper-Version des von Carrierwave erstellten Bildes auf.

Sie haben jetzt Swipe in Ihrem Fall implementiert.