[RUBY] Laden Sie einfach mehrere Bilder mit Rails Rails + Carrierwave + Cloudinary hoch

1. Übersicht

Wenn Sie eine App erstellen möchten, die das Posten von Bildern mit Schienen verwendet, gibt es viele Personen, die mehrere Bilder gleichzeitig veröffentlichen möchten. Dieses Mal werden wir bei der Entwicklung einer einfachen Rails-Posting-Anwendung diese implementieren, damit mehrere Bilder gepostet werden können.

• Diese Bildveröffentlichung erfolgt mit Cloudinary.

2. Einführung

Entwicklungsumgebung

Umgebung

ruby 2.6.3
Rails 6.0.3

Geplant für die Fertigstellung

Bevor Sie beginnen: Melden Sie sich bei Cloudinary an

Starten Sie die Registrierung über diesen Link. https://cloudinary.com/

Drücken Sie oben rechts auf Kostenlos anmelden, um zum Registrierungsbildschirm zu springen. Nachdem Sie verschiedene Informationen registriert und die vorübergehende Registrierung abgeschlossen haben, öffnen Sie bitte die endgültige Registrierungsnachricht, die an Ihre E-Mail-Adresse gesendet wurde, und schließen Sie die Hauptregistrierung ab.

3. Implementierung der Funktion zum Posten mehrerer Bilder

3.1 Vorbereitung

Um die Funktion zum Posten mehrerer Bilder zu implementieren, erstellen wir zunächst eine Beispielanwendung, die nur Beiträge veröffentlicht.

Terminal

$ cd
$ cd desktop
$ rails new ImageSample

3.2. Funktionen rund um das Posten

Funktionen rund um das Posten werden über das Gerüst erstellt. Erstellen Sie zu diesem Zeitpunkt mehrere Bildspalten. Dieses Mal können wir zwei Bilder, Bild1 und Bild2, gleichzeitig veröffentlichen. Wenn Sie 3 oder mehr gleichzeitig veröffentlichen möchten, erhöhen Sie die Spalten mit image3 und image4.

Terminal

$ cd ImageSample
$ rails g scaffold post body:text image1:string image2:string
$ rails db:migrate

3.3. Änderung anzeigen (neue Beitragsseite)

Bearbeiten Sie _form.html.erb, damit Sie das Bild auf der neuen Beitragsseite auswählen können.

ruby:posts/_form.html.erb

  #Vorher ändern
<%= form.text_field :image1 %>

  #Nach der veränderung
<%= form.file_field :image1 %>

Nehmen Sie ähnliche Änderungen an image2 vor.

3.4. Änderung anzeigen (Postlistenseite)

ruby:posts/index.html.erb

  #Vorher ändern
<td><%= post.image1 %></td>

  #Nach der veränderung
<td><%= image_tag post.image1_url ,size: '200x150' %></td>

Nehmen Sie ähnliche Änderungen an image2 vor. In Bezug auf die Größe: '200x150' gibt es kein Problem, wenn Sie es nicht schreiben, aber ich habe es geschrieben, um zu verhindern, dass sich das Bild ausbreitet, um den Bildschirm auszufüllen.

3.5. Ansicht ändern (Post Details Seite)

Dies ist im Grunde dasselbe wie auf der Postlistenseite.

ruby:posts/show.html.erb

  #Vorher ändern
<%= @post.image1 %>

  #Nach der veränderung
<%= image_tag @post.image1_url ,size: '200x150' %>

Nehmen Sie ähnliche Änderungen an image2 vor.

3.6. Zugabe von Edelstein

Gemfile

gem 'carrierwave'
gem 'cloudinary'
gem 'dotenv-rails'

Einmal hinzugefügt,

Terminal

$ bundle install

Reflektieren.

3.7. Uploader

Uploader erstellen

Erstellen Sie mit dem CarrierWave-Generator einen Uploader.

Terminal

$ rails g uploader Image

Modelländerung

Ändern Sie app / models / post.rb wie folgt.

app/models/post.rb

class Post < ApplicationRecord
    mount_uploader :image1, ImageUploader
    mount_uploader :image2, ImageUploader
end

Uploader-Einstellungen

Ändern Sie die Zeilen 6-8 von app / uploaders / image_uploader.rb.

app/uploaders/image_uploader.rb

  # Choose what kind of storage to use for this uploader:
  storage :file
  # storage :fog

Ändern Sie die obigen Angaben wie in der folgenden Abbildung gezeigt.

app/uploader/image_uploader.rb

  # Choose what kind of storage to use for this uploader:
  if Rails.env.production?
    include Cloudinary::CarrierWave
    CarrierWave.configure do |config|
      config.cache_storage = :file
    end
  else
    storage :file
  end
  # storage :fog

3.8. Cloudinärer API-Schlüssel

.env Datei

Erstellen Sie selbst eine Datei mit dem Namen .env im Anwendungsverzeichnis (dem Verzeichnis, in dem sich app, db und Gemfile befinden). Geben Sie dann Folgendes in die von Ihnen erstellte ENV-Datei ein:

.env

CLOUD_NAME=q0w9e8r7t6yu5  #← Dieser Wert variiert von Person zu Person! !!
CLOUDINARY_API_KEY=123456789012345 #← Dieser Wert variiert von Person zu Person! !!
CLOUDINARY_API_SECRET=1a2s3d4f5g6h7j8k9l0a1s2d4f5g6h1q #← Dieser Wert variiert von Person zu Person! !!

Verwenden Sie den "Cloud-Namen", den "API-Schlüssel" und das "API-Geheimnis" des erworbenen Cloudinary-Kontos. Schreiben Sie hier jeden Wert nach "=" mit dem zuvor von My Page of Cloudinary erhaltenen Schlüssel neu (die Anzahl variiert je nach Person).

.gitignore Fügen Sie .gitignore im Anwendungsverzeichnis Folgendes hinzu.

.gitignore

/.env

cloudinary.yml Erstellen Sie eine cloudinary.yml-Datei im Konfigurationsordner. Kopieren Sie es einfach und fügen Sie es wie folgt in config / cloudinary.yml ein.

config/cloudinary.yml

development:
  cloud_name: <%= ENV['CLOUD_NAME'] %>
  api_key: <%= ENV['CLOUDINARY_API_KEY'] %>
  api_secret: <%= ENV['CLOUDINARY_API_SECRET'] %>
  enhance_image_tag: true
  static_file_support: false
production:
  cloud_name: <%= ENV['CLOUD_NAME'] %>
  api_key: <%= ENV['CLOUDINARY_API_KEY'] %>
  api_secret: <%= ENV['CLOUDINARY_API_SECRET'] %>
  enhance_image_tag: true
  static_file_support: false
test:
  cloud_name: <%= ENV['CLOUD_NAME'] %>
  api_key: <%= ENV['CLOUDINARY_API_KEY'] %>
  api_secret: <%= ENV['CLOUDINARY_API_SECRET'] %>
  enhance_image_tag: true
  static_file_support: false

4. Am Ende

Ich denke, dass Sie jetzt mehrere Bilder posten können. Es tut mir leid, dass die Erklärung minimal ist, aber wenn Sie möchten, beziehen Sie sich bitte darauf! Vielen Dank für das Lesen bis zum Ende! !!