Ich bin zum ersten Mal ein Anfänger des Programmierlernens für ungefähr 3 Monate, aber ich möchte ein Memorandum darüber aufbewahren, was ich im Rails-Tutorial gelernt habe. Dieser Artikel wurde unter Bezugnahme auf das Rails-Tutorial geschrieben.
Der bequemste Weg, Dateien in Rails hochzuladen, ist die Verwendung einer in Rails integrierten Funktion namens Active Storage. Mit dieser Funktion können Sie ganz einfach eine Bildposting-Funktion usw. mit einem Formular erstellen. Mit Active Storage in Ihrer Anwendung können Sie ImageMagick verwenden, um Bild-Uploads zu konvertieren, Nicht-Bild-Upload-Bilddarstellungen wie PDFs und Videos zu generieren und Metadaten aus beliebigen Dateien zu extrahieren.
$ rails active_storage:install
$ rails db:migrate
Diese Migration erzeugt zwei Tabellen mit den Namen "active_storage_blobs" und "active_storage_attachments". ｀ active_storage_blobsist die Tabelle, in der die tatsächlich hochgeladenen Dateien gespeichert sind, undactive_storage_attachments` ist die Zwischentabelle.
Angenommen, Sie fügen diesmal ein Bild zum Micropost-Modell hinzu.
micropost.rb
class Micropost < ApplicationRecord
has_one_attached :image
end
: image ist der Dateiname. Bitte verwenden Sie je nach Zweck der Datei, wie Sie möchten: Foto, Avatar usw. Die Methode "has_one_attached" wird verwendet, um das angegebene Modell der hochgeladenen Datei zuzuordnen. Geben Sie in diesem Fall das Bild an, das dem Modell "Micropost" zugeordnet werden soll.
Fügen Sie dann das Tag "file_fiele" zum Mikropost-Formular hinzu.
ruby:app/views/shared/_micropost_form.html.erb
<%= form_with model: @micropost, local: true do |f| %>
<%= f.text_area :content %>
<%= f.file_field :image %>
<%= f.submit %>
<% end %>
Aktualisieren Sie abschließend den "Microposts" -Controller, damit Sie dem neu erstellten "Micropost" -Objekt Bilder hinzufügen können. Die "Actuve Storage API" bietet dafür eine "Attach" -Methode, die Sie verwenden können. Fügen Sie in der Aktion "Erstellen" des Controllers "Microposts" das hochgeladene Bild an das Objekt "@ micropost" an. Um diesen Upload zuzulassen, müssen Sie auch die Methode micropost_params aktualisieren, um: image zur Liste der zulässigen Attribute hinzuzufügen, damit sie über das Web aktualisiert werden kann.
microposts_controller.rb
class MicropostsController < ApplicationController
def create
@micropost = current_user.microposts.build(micropost_params)
@micropost.image.attach(params[:micropost][:image])
if @micropost.save
flash[:success] = "Micropost created!"
redirect_to root_url
else
@feed_items = current_user.feed.paginate(page: params[:page])
render 'static_pages/home'
end
end
private
def micropost_params
params.require(:micropost).permit(:content, :image)
end
end
Sobald das Bild hochgeladen wurde, können Sie den Micropost Partial'image_tag'-Helfer verwenden, um das zugehörige Micropost.image zu zeichnen (zu rendern). Da an den Beitrag möglicherweise ein Bild angehängt ist oder nicht (nur Text ohne Bild usw.), handelt es sich um einen Beitrag mit einem angehängten Bild, der eine Methode verwendet, die den logischen Wert "angehängt" zurückgibt. Überprüfen Sie, ob der Beitrag nicht angehängt ist, und zeigen Sie das Bild an, wenn ein Bild angehängt ist.
ruby:app/views/microposts/_micropost.html.erb
<%= image_tag micropost.image if micropost.image.attached? %>
Der obige Uploader hat einige bemerkenswerte Nachteile. Insbesondere gibt es keine Einschränkungen für hochgeladene Bilder. Wenn ein Benutzer eine große oder eine ungültige Datei erstellt, treten Probleme auf. Um dieses Manko zu beheben, implementieren Sie die Validierung für Bildgröße und -format. Active Storage unterstützt diese Formatierungs- und Validierungsfunktionen nicht nativ. Fügen Sie also ein Juwel für die Validierung des aktiven Speichers hinzu.
Gemfile
gem 'active_storage_validations'
Vergessen Sie nicht, die Bundle-Installation auszuführen.
$ bundle install
Wenn Sie die Dokumentation zu diesem Juwel lesen, werden Sie feststellen, dass Sie das Bild validieren können, indem Sie den Inhaltstyp wie folgt überprüfen:
content_type: { in: %w[image/jpeg image/gif image/png],
message: "must be a valid image format" }
Dadurch wird nach Bildern gesucht, die den unterstützten Bildformaten entsprechen.
Ebenso kann die Dateigröße wie folgt überprüft werden:
size: { less_than: 5.megabytes,
message: "should be less than 5MB" }
Dieses Mal beschränken wir die Größe des Bildes auf 5 MB. Fügen Sie diese Validierungen Ihrem Micropost-Modell hinzu.
micropost.rb
class Micropost < ApplicationRecord
validates :image, content_type: { in: %w[image/jpeg image/gif image/png],
message: "must be a valid image format" },
size: { less_than: 5.megabytes,
message: "should be less than 5MB" }
end
Zusätzlich zu diesen Überprüfungen werden wir einen Mechanismus hinzufügen, um die Größe und das Format von Bild-Uploads auf der Clientseite (dh dem Browser) zu überprüfen. Fügen Sie ein bisschen JavaScript (speziell jQuery) hinzu, um eine Warnung zu erhalten, wenn das Bild, das der Benutzer hochladen möchte, zu groß ist (auf diese Weise verschwendet der Benutzer Zeit beim Hochladen). Sie müssen nicht, und die Belastung des Servers ist geringer.
ruby:app/views/shared/_micropost_form.html.erb
<script type="text/javascript">
$("#micropost_image").bind("change", function() {
var size_in_megabytes = this.files[0].size/1024/1024;
if (size_in_megabytes > 5) {
alert("Maximum file size is 5MB. Please choose a smaller file.");
$("#micropost_image").val("");
}
});
</script>
Dies warnt Sie mit der "alert" -Methode, wenn die Dateigröße zu groß ist.
Schließlich können Sie den Parameter accept im Eingabe-Tag file_field verwenden, um dem Benutzer mitzuteilen, dass Sie nur in einem gültigen Format hochladen können.
ruby:app/views/shared/_micropost_form.html.erb
<%= f.file_field :image, accept: "image/jpeg,image/gif,image/png" %>
Zunächst können nur die gültigen Bildformate ausgewählt werden, und die anderen Dateitypen sind ausgegraut.
Um die Größe eines Bildes zu ändern, benötigen Sie ein Programm, das das Bild bearbeitet. Dieses Mal werden wir ein Programm namens "ImageMagick" verwenden, also installieren Sie es in der Entwicklungsumgebung. (Wenn die Produktionsumgebung "Heroku" ist, können Sie "ImageMagick" bereits in der Produktionsumgebung verwenden.)
In der Cloud-IDE können Sie dieses Programm mit dem folgenden Befehl installieren:
$ sudo apt-get -y install imagemagick
Wenn Sie keine Cloud-IDE oder eine gleichwertige Linux-Umgebung verwenden, hängt das Verfahren zur Installation von ImagiMagick von Ihrer Umgebung ab. Auf einem Mac können Sie ihn beispielsweise nur mit dem Befehl Brew Install Imagemagick installieren, wenn Sie Homebrew installiert haben.
So installieren Sie Homebrew
$ brew install imagemagick
Als nächstes brauchen wir einige Edelsteine für die Bildverarbeitung.
Es erfordert image_processing gem und mini_magick gem, einen Ruby ImageMagick-Prozessor.
Gemfile
gem 'image_processing'
gem 'mini_magick'
$ bundle install
Wahrscheinlich müssen Sie den Rails-Server nach der Installation neu starten.
Sie können konvertierte Bilder mit der von Active Storage bereitgestellten "varianten" -Methode erstellen. Verwenden Sie insbesondere die Option "resize_to_limit", um die Breite und Höhe des Bilds so zu beschränken, dass es 500 Pixel nicht überschreitet, wie unten gezeigt.
image.variant(resize_to_limit: [500, 500])
Dieser Code wird der Einfachheit halber separat in die display_image-Methode eingefügt.
micropost.rb
#Gibt ein verkleinertes Bild zur Anzeige zurück
def display_image
imge.variant(resize_to_limit: [500, 500])
end
Jetzt können Sie display_image mit Micropost-Partials verwenden.
ruby:app/views/microposts/_micropost.html.erb
<%= image_tag micropost.display_image if micropost.image.attached? %>
Recommended Posts