Share
Dacă construiți o aplicație web, cu siguranță veți dori să activați încărcarea imaginilor. Încărcarea de imagini este o caracteristică importantă în aplicațiile moderne, iar imaginile sunt cunoscute a fi utile în optimizarea motorului de căutare.
În acest tutorial (care este prima parte a seriei Rails Image Uploading), vă voi arăta cum să activați încărcarea imaginilor în aplicația Rails utilizând CarrierWave. Va fi o aplicație simplă, deoarece accentul se pune pe încărcarea imaginilor.
CarrierWave este o bijuterie Ruby care oferă o modalitate simplă și extrem de flexibilă de a încărca fișiere din aplicațiile Ruby. Trebuie să aveți Rails pe mașina dvs. pentru a urmări. Desigur, deschideți terminalul și introduceți comanda de mai jos:
rails -v
Aceasta vă va arăta versiunea Rails pe care ați instalat-o. Pentru acest tutorial voi folosi versiunea 4.2.4, pe care o puteți instala astfel:
bijuterii de instalare a bijuteriilor -v 4.2.4
Cu ce ați făcut, sunteți bine să mergeți.
Acum creați un nou proiect Rails:
șinele noi
Deschideți Gemfilele și adăugați următoarele pietre prețioase.
* Gemfile * ... gem 'carrierwave', '~> 0.10.0' gem 'mini_magick', '~> 4.3' ...
Prima bijuterie este pentru CarrierWave, iar a doua bijuterie numită mini_magick ajută la redimensionarea imaginilor în aplicația Rails. Cu ce ați făcut, rulați instalarea pachetului.
Generați o resursă pentru schele pentru a adăuga funcționalitatea CarrierWave. Rulați următoarea comandă din terminal:
rails g scaffold Numele animalului: descrierea șirului: text text: string
Un schelă în Rails este un set complet de model, migrarea bazei de date pentru acel model, controlerul pentru a-l manipula, vizualizările pentru vizualizarea și manipularea datelor și o suită de testare pentru fiecare dintre cele de mai sus.
Migrează baza de date următoare:
rake db: migrați
Trebuie să creați un inițializator pentru CarrierWave, care va fi folosit pentru încărcarea CarrierWave după încărcarea ActiveRecord.
Navigheaza catre config> inițializatoare și creați un fișier: carrier_wave.rb.
Lipiți codul de mai jos.
* config / initializers / carrier_wave.rb * necesită 'carrierwave / orm / activerecord'
Din terminalul dvs., generați un încărcător:
șinele generează imaginea încărcătorului
Acest lucru va crea un nou director numit uploaders în dosarul App și un fișier în interiorul numit image_uploader.rb. Conținutul fișierului ar trebui să arate astfel:
Accentsconagua
* app / uploaders / image_uploader.rb * # encoding: utf-8 din clasa 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] # # scară def (lățime, înălțime) # # face ceva # sfârșit # Creați versiuni diferite ale fișierelor încărcate: # versiune: thumb do # process: resize_to_fit => [50, 50] # end # lista albă a extensiilor cărora li se permite încărcarea. # Pentru imagini puteți folosi ceva de genul: # def extensie_white_list #% w (jpg jpeg gif png) # end # Înlocuiți numele fișierului fișierelor încărcate: # Evitați să utilizați model.id sau version_name aici, vedeți uploader / store.rb pentru Detalii. # def nume fișier # "something.jpg" dacă original_filename # sfârșitul final Puteți să o editați pentru a se potrivi cu ceea ce doriți. Lasă-mă să te trec prin asta.
Mai întâi, desfaceți linia MiniMagick. Ar trebui să fie linia 7.
... include CarrierWave :: MiniMagick ...
Aveți nevoie de acest lucru pentru a genera versiuni diferite ale unei imagini. Dacă doriți să generați o versiune miniaturală a imaginilor încărcate, există deja un formular de cod inclus în fișierul image_uploader pentru dvs. Dezactivați blocul de coduri de versiune, după cum se arată mai jos:
... versiune: degetul mare face proces: resize_to_fill => [50, 50] sfârșit ...
De asemenea, puteți adăuga versiuni diferite utilizând același format.
În scopul acestui tutorial, vom salva în dosar și nu ceață. Ceață este biblioteca de servicii Ruby cloud. Vă voi arăta cum să îl folosiți într-o altă parte a acestei serii. Deci, lăsați opțiunea de stocare așa cum este.
Din motive de securitate, anumite fișiere ar putea reprezenta o amenințare dacă pot fi încărcate într-o locație greșită. CarrierWave vă permite să specificați o listă albă a extensiilor permise. Ar trebui să vedeți o metodă care arată ca cea pe care o am în partea de jos, așa că nu o faceți.
... def extens_white_list% w (jpg jpeg gif png) sfârșitul ...
Este timpul să vă montați încărcătorul. Navigați la modelul dvs. și lipiți codul de mai jos.
* app / model / pet.rb * mount_uploader: imagine, ImageUploader
Mergeți la vizualizările dvs. și le modificați pentru a arăta cum am făcut mai jos:
app / views / Animale de companie / _form.html.erb <%= form_for @pet, html: multipart: true do |f| %> <% if @pet.errors.any? %><% end %><%= pluralize(@pet.errors.count, "error") %> a interzis acest animal de companie să fie salvat:
<% @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 %>
Deschideți terminalul și porniți serverul de șine: rails s.
Punctați browser-ul dvs. la http: // localhost: 3000 / casă. Ar trebui să puteți adăuga un nou animal de companie prin introducerea unui nume și descriere și încărcarea unei imagini. Imaginea nu este afișată după încărcarea cu succes. Lasă-mă să-ți arăt cum să rezolvi asta.
Navigați la pagina dvs. de redare în care afișați imaginea și editați-o pentru a se potrivi cu cea de mai jos:
* App / views / Animale de companie / show.html.erb *<%= notice %>
Nume: <%= @pet.name %>
Descriere: <%= @pet.description %>
Imagine: <%= image_tag @pet.image.thumb.url %>
<%= link_to 'Edit', edit_pet_path(@pet) %> | <%= link_to 'Back', pets_path %>
Aceasta va afișa versiunea miniaturală a imaginii.
CarrierWave simplifică eliminarea unui fișier încărcat anterior pe un dispozitiv de încărcare instalat, cu doar o casetă de selectare. Vă voi arăta cum să faceți asta.
Deschideți fișierul de formular și faceți o mică ajustare. Editați-l astfel:
* App / views / Animale de companie / _form.html.erb * <%= form_for @pet, html: multipart: true do |f| %> <% if @pet.errors.any? %><% end %><%= pluralize(@pet.errors.count, "error") %> a interzis acest animal de companie să fie salvat:
<% @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 %>
În codul de mai sus, am verificat dacă există deja un obiect de imagine. Dacă există, afișăm imaginea și opțiunea de al elimina, dar dacă nu există, afișăm doar câmpul pentru a încărca imaginea.
Navigați la controler și adăugați : remove_image la parami. Reîncărcați pagina de editare, bifați caseta, faceți clic pe Update Pet, iar imaginea va fi eliminată.
Există diferite modalități de a face acest lucru. Vă voi arăta o metodă ușoară și rapidă. Deschideți modelul de animal de companie și inserați codul de mai jos:
* app / model / pet.rb validates_processing_of: validare imagine: image_size_validation private def image_size_validation eroare [: image] << "should be less than 500KB" if image.size > Sfârșitul de 0,5 megabiți
Acest lucru vă va ajuta să vă asigurați că nici o imagine mai mare de 500KB nu este încărcată în aplicația Rails. Porniți serverul de șine și verificați ce aveți.
Acum știi cum să activezi încărcarea imaginilor în aplicația Rails. De asemenea, ați învățat cum să validați formatul și dimensiunea, precum și să ștergeți o imagine. În următoarea parte a acestei serii, vom analiza cum să folosim CarrierWave alături de Devise.
