Share
Wenn Sie eine Webanwendung erstellen, möchten Sie auf jeden Fall das Hochladen von Bildern aktivieren. Das Hochladen von Bildern ist ein wichtiges Merkmal in modernen Anwendungen, und Bilder haben sich als nützlich für die Suchmaschinenoptimierung erwiesen.
In diesem Tutorial (dem ersten Teil der Rails Image Uploading-Serie) werde ich Ihnen zeigen, wie Sie das Hochladen von Bildern in Ihrer Rails-Anwendung mithilfe von CarrierWave aktivieren. Es wird eine einfache Anwendung sein, da der Fokus auf dem Hochladen von Bildern liegt.
CarrierWave ist ein Ruby-Edelstein, der eine einfache und äußerst flexible Methode zum Hochladen von Dateien aus Ruby-Anwendungen bietet. Sie müssen Rails auf Ihrer Maschine haben, um mitzufahren. Um sicherzugehen, öffnen Sie Ihr Terminal und geben Sie den folgenden Befehl ein:
Schienen -v
Das zeigt Ihnen die installierte Version von Rails. Für dieses Tutorial werde ich Version 4.2.4 verwenden, die Sie wie folgt installieren können:
gem monte Schienen -v 4.2.4
Wenn das erledigt ist, sind Sie gut zu gehen.
Erstellen Sie nun ein neues Rails-Projekt:
Schienen neue Mypets
Öffne dein Gemfile und füge die folgenden Edelsteine hinzu.
* Gemfile *… Juwel 'carrierwave', '~> 0.10.0' Juwel 'mini_magick', '~> 4.3'…
Das erste Juwel ist für CarrierWave und das zweite Juwel namens mini_magick hilft bei der Größenänderung von Bildern in Ihrer Rails-Anwendung. Führen Sie danach die Bundle-Installation aus.
Generieren Sie eine Gerüstressource, um die CarrierWave-Funktionalität hinzuzufügen. Führen Sie den folgenden Befehl von Ihrem Terminal aus aus:
Schienen g Gerüst Name des Haustieres: Zeichenfolge Beschreibung: Textbild: Zeichenfolge
Ein Gerüst in Rails umfasst einen vollständigen Satz von Modellen, die Datenbankmigration für dieses Modell, den Controller, der es manipuliert, Ansichten zum Anzeigen und Bearbeiten der Daten und eine Test-Suite für jedes der oben genannten.
Migrieren Sie als Nächstes Ihre Datenbank:
rake db: migrieren
Sie müssen einen Initialisierer für CarrierWave erstellen, der zum Laden von CarrierWave nach dem Laden von ActiveRecord verwendet wird.
Navigiere zu config> Initialisierer und erstellen Sie eine Datei: carrier_wave.rb.
Fügen Sie den Code unten ein.
* config / initializers / carrier_wave.rb * erfordert 'carrierwave / orm / activerecord'
Generieren Sie von Ihrem Terminal aus einen Uploader:
Schienen erzeugen Uploader Image
Dadurch wird ein neues Verzeichnis mit dem Namen "Uploader" im App-Ordner und eine Datei mit dem Namen "" erstellt image_uploader.rb. Der Inhalt der Datei sollte folgendermaßen aussehen:
Accentsconagua
* app / uploaders / image_uploader.rb * # Kodierung: utf-8-Klasse ImageUploader < CarrierWave::Uploader::Base # Include RMagick or MiniMagick support: # include CarrierWave::RMagick # include CarrierWave::MiniMagick # Choose what kind of storage to use for this uploader: storage :file # storage :fog # Override the directory where uploaded files will be stored. # This is a sensible default for uploaders that are meant to be mounted: def store_dir "uploads/#model.class.to_s.underscore/#mounted_as/#model.id" end # Provide a default URL as a default if there hasn't been a file uploaded: # def default_url # # For Rails 3.1+ asset pipeline compatibility: # # ActionController::Base.helpers.asset_path("fallback/" + [version_name, "default.png"].compact.join('_')) # # "/images/fallback/" + [version_name, "default.png"].compact.join('_') # end # Process files as they are uploaded: # process :scale => [200, 300] # # def scale (Breite, Höhe) # # etwas tun # end # Erstellen Sie verschiedene Versionen Ihrer hochgeladenen Dateien: # version: thumb do # process: resize_to_fit => [50, 50] # end # Fügen Sie ein weiße Liste der Erweiterungen, die hochgeladen werden dürfen. # Für Bilder können Sie etwa Folgendes verwenden: # def extension_white_list #% w (jpg jpeg gif png) # end # Überschreiben Sie den Dateinamen der hochgeladenen Dateien: # Vermeiden Sie die Verwendung von model.id oder version_name. Siehe hierzu uploader / store.rb Einzelheiten. # def Dateiname # "Etwas.jpg" Wenn Originaldateiname # Ende endet Sie können es bearbeiten, um es Ihren Wünschen anzupassen. Lass mich dich durchmachen.
Kommentieren Sie zunächst die MiniMagick-Linie. Das sollte Zeile 7 sein.
… Umfassen CarrierWave :: MiniMagick…
Sie benötigen dies, um verschiedene Versionen eines Bildes zu generieren. Wenn Sie eine Miniaturansicht-Version von hochgeladenen Bildern erstellen möchten, ist in der Datei image_uploader bereits ein Code-Formular enthalten. Kommentieren Sie den Versionscodeblock wie folgt:
… Version: thumb do process: resize_to_fill => [50, 50] end…
Sie können auch verschiedene Versionen mit demselben Format hinzufügen.
In diesem Lernprogramm speichern wir Dateien und nicht Nebel. Fog ist die Ruby Cloud-Service-Bibliothek. Ich werde Ihnen zeigen, wie Sie es in einem anderen Teil dieser Serie einsetzen können. Lassen Sie Ihre Speicheroption also unverändert.
Aus Sicherheitsgründen können bestimmte Dateien eine Bedrohung darstellen, wenn sie an den falschen Speicherort hochgeladen werden dürfen. In CarrierWave können Sie eine Whitelist der zulässigen Erweiterungen angeben. Sie sollten eine Methode sehen, die so aussieht, wie ich sie unten habe.
… Def extension_white_list% w (jpg jpeg gif png) end…
Es ist Zeit, Ihren Uploader zu mounten. Navigieren Sie zu Ihrem Modell und fügen Sie den folgenden Code ein.
* app / model / pet.rb * mount_uploader: image, ImageUploader
Gehen Sie zu Ihren Ansichten und bearbeiten Sie sie so, dass sie wie folgt aussieht:
app / views / pets / _form.html.erb <%= form_for @pet, html: multipart: true do |f| %> <% if @pet.errors.any? %><% end %><%= pluralize(@pet.errors.count, "error") %> Es ist verboten, dieses Tier zu retten:
<% @pet.errors.full_messages.each do |message| %>
- <%= message %>
<% end %><%= f.label :name %>
<%= f.text_field :name %><%= f.label :description %>
<%= f.text_area :description %><%= f.label :image %>
<%= f.file_field :image %><%= f.submit %><% end %>
Öffnen Sie Ihr Terminal und starten Sie Ihren Rail-Server: Schienen s.
Richten Sie Ihren Browser auf http: // localhost: 3000 / pets. Sie sollten in der Lage sein, ein neues Haustier hinzuzufügen, indem Sie einen Namen und eine Beschreibung eingeben und ein Bild hochladen. Das Bild wird nach dem erfolgreichen Hochladen nicht angezeigt. Lassen Sie mich Ihnen zeigen, wie Sie das beheben können.
Navigieren Sie zu Ihrer Show-Seite, auf der Sie das Bild anzeigen, und bearbeiten Sie es entsprechend dem unten abgebildeten Bild:
* app / views / pets / show.html.erb *<%= notice %>
Name: <%= @pet.name %>
Beschreibung: <%= @pet.description %>
Bild: <%= image_tag @pet.image.thumb.url %>
<%= link_to 'Edit', edit_pet_path(@pet) %> | <%= link_to 'Back', pets_path %>
Daraufhin wird die Miniaturansicht des Bildes angezeigt.
Mit CarrierWave können Sie eine zuvor hochgeladene Datei auf einem bereitgestellten Uploader ganz einfach mit einem Kontrollkästchen entfernen. Ich werde dir zeigen, wie es geht.
Öffnen Sie Ihre Formulardatei und nehmen Sie eine kleine Anpassung vor. Bearbeiten Sie es so, dass es so aussieht:
* app / views / pets / _form.html.erb * <%= form_for @pet, html: multipart: true do |f| %> <% if @pet.errors.any? %><% end %><%= pluralize(@pet.errors.count, "error") %> Es ist verboten, dieses Tier zu retten:
<% @pet.errors.full_messages.each do |message| %>
- <%= message %>
<% end %><%= f.label :name %>
<%= f.text_field :name %><%= f.label :description %>
<%= f.text_area :description %><%= f.label :image %>
<%= f.file_field :image %> <% if f.object.image? %> <%= image_tag f.object.image.thumb.url %> <%= f.label :remove_image %> <%= f.check_box :remove_image %> <% end %><%= f.submit %><% end %>
Im obigen Code haben wir geprüft, ob bereits ein Bildobjekt vorhanden ist. Wenn dies der Fall ist, zeigen wir das Bild und die Option zum Entfernen an. Ist dies nicht der Fall, wird nur das Feld zum Hochladen des Bildes angezeigt.
Navigiere zu deinem Controller und füge hinzu :entferne Bild zu deinen params. Laden Sie Ihre Bearbeitungsseite neu, markieren Sie das Kästchen und klicken Sie auf Pet aktualisieren, und das Bild wird entfernt.
Dafür gibt es verschiedene Möglichkeiten. Ich zeige Ihnen eine einfache und schnelle Methode. Öffne dein Tiermodell und füge den Code unten ein:
* app / model / pet.rb validates_processing_of: image validate: image_size_validation privater Def image_size_validation-Fehler [: image] << "should be less than 500KB" if image.size > 0,5 Megabyte ende
Dadurch wird sichergestellt, dass kein Bild mit mehr als 500 KB in Ihre Rails-Anwendung hochgeladen wird. Starten Sie Ihren Schienen-Server und prüfen Sie, was Sie haben.
Jetzt wissen Sie, wie Sie das Hochladen von Bildern in Ihrer Rails-Anwendung aktivieren. Sie haben auch gelernt, wie Sie das Format und die Größe überprüfen und ein Bild löschen können. Im nächsten Teil dieser Serie wird gezeigt, wie Sie CarrierWave neben Devise einsetzen können.
