Share
Als u een webtoepassing aan het bouwen bent, wilt u absoluut het uploaden van afbeeldingen mogelijk maken. Het uploaden van afbeeldingen is een belangrijke functie in moderne toepassingen en afbeeldingen staan erom bekend nuttig te zijn bij het optimaliseren van zoekmachines.
In deze zelfstudie (het eerste deel van de Rails Image Uploading-serie) laat ik u zien hoe u het uploaden van afbeeldingen in uw Rails-applicatie kunt inschakelen met CarrierWave. Het zal een eenvoudige applicatie zijn omdat de focus ligt op het uploaden van afbeeldingen.
CarrierWave is een Ruby-juweeltje dat een eenvoudige en uiterst flexibele manier biedt om bestanden vanuit Ruby-applicaties te uploaden. U moet Rails op uw machine hebben om mee te kunnen volgen. Om zeker te zijn, open je je terminal en voer je de onderstaande opdracht in:
rails -v
Dat toont u de versie van Rails die u hebt geïnstalleerd. Voor deze tutorial gebruik ik versie 4.2.4, die je zo kunt installeren:
gem installeren rails -v 4.2.4
Met dat gedaan, ben je goed om te gaan.
Maak nu een nieuw Rails-project:
rails nieuwe mypets
Open je Gemfile en voeg de volgende edelstenen toe.
* Gemfile * ... gem 'carrierwave', '~> 0.10.0' gem 'mini_magick', '~> 4.3' ...
Het eerste juweel is voor CarrierWave en het tweede juweel genaamd mini_magick helpt bij het aanpassen van de grootte van afbeeldingen in je Rails-applicatie. Als dat klaar is, voer bundle install uit.
Genereer een scaffold-resource om de functionaliteit van CarrierWave toe te voegen. Voer de volgende opdracht uit vanaf uw terminal:
rails g steiger Huisdier naam: string beschrijving: tekst afbeelding: string
Een steiger in Rails is een volledige set van het model, databasemigratie voor dat model, controller om het te manipuleren, weergaven om de gegevens te bekijken en manipuleren en een testsuite voor elk van de bovenstaande.
Migreer uw database vervolgens:
rake db: migreren
U moet een initializer maken voor CarrierWave, die zal worden gebruikt voor het laden van CarrierWave na het laden van ActiveRecord.
Navigeren naar config> initializers en maak een bestand aan: carrier_wave.rb.
Plak de onderstaande code erin.
* config / initializers / carrier_wave.rb * vereisen 'carrierwave / orm / activerecord'
Genereer vanuit uw terminal een uploader:
rails genereren uploader afbeelding
Hiermee wordt een nieuwe map gemaakt met de naam uploaders in de app-map en een bestand binnen genaamd image_uploader.rb. De inhoud van het bestand zou er als volgt uit moeten zien:
Accentsconagua
* app / uploaders / image_uploader.rb * # codering: utf-8 class 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 (width, height) # # do something # end # Maak verschillende versies van uw geüploade bestanden: # version: thumb do # process: resize_to_fit => [50, 50] # end # voeg een toe witte lijst met extensies die mogen worden geüpload. # Voor afbeeldingen kunt u zoiets als dit gebruiken: # def extension_white_list #% w (jpg jpeg gif png) # end # Negeer de bestandsnaam van de geüploade bestanden: # Vermijd het gebruik van model.id of version_name hier, zie uploader / store.rb voor details. # def bestandsnaam # "something.jpg" als original_bestandsnaam # einde Je kunt het aanpassen aan wat je wilt. Laat me je er doorheen leiden.
Roep allereerst de MiniMagick-regel op. Dat zou lijn 7 moeten zijn.
... inclusief CarrierWave :: MiniMagick ...
U hebt dit nodig om verschillende versies van een afbeelding te genereren. Als u een thumbnail-versie van de geüploade afbeeldingen wilt genereren, is er al een codeformulier in het image_uploader-bestand voor u. Noteer het versleutelingscode blok zoals hieronder getoond:
... versie: thumb do process: resize_to_fill => [50, 50] einde ...
U kunt ook verschillende versies toevoegen met dezelfde indeling.
Voor deze tutorial zullen we opslaan om te archiveren en niet te foggen. Fog is de Ruby cloudservicebibliotheek. Ik zal je laten zien hoe je het in een ander deel van deze serie in gebruik kunt nemen. Laat uw opslagoptie dus zoals het is.
Uit veiligheidsoverwegingen kunnen bepaalde bestanden een bedreiging vormen als ze op de verkeerde locatie mogen worden geüpload. Met CarrierWave kunt u een witte lijst met toegestane extensies specificeren. Je zou een methode moeten zien die lijkt op wat ik hieronder heb, dus reageer er niet op.
... def extension_white_list% w (jpg jpeg gif png) einde ...
Het is tijd om je uploader te koppelen. Navigeer naar uw model en plak de onderstaande code.
* app / model / pet.rb * mount_uploader: image, ImageUploader
Ga naar je eigen opvattingen en bewerk deze om eruit te zien als wat ik hieronder heb:
app / views / huisdieren / _form.html.erb <%= form_for @pet, html: multipart: true do |f| %> <% if @pet.errors.any? %><% end %><%= pluralize(@pet.errors.count, "error") %> verboden dit huisdier te redden:
<% @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 %>
Open uw terminal en start uw rails-server: rails s.
Richt uw browser op http: // localhost: 3000 / pets. U zou een nieuw huisdier moeten kunnen toevoegen door een naam en beschrijving in te voeren en een afbeelding te uploaden. De afbeelding wordt niet weergegeven na het succesvol uploaden. Laat me je laten zien hoe je dat kunt oplossen.
Navigeer naar uw showpagina waar u de afbeelding weergeeft en bewerk deze om te passen aan wat ik hieronder heb:
* App / views / huisdieren / show.html.erb *<%= notice %>
Naam: <%= @pet.name %>
Omschrijving: <%= @pet.description %>
Beeld: <%= image_tag @pet.image.thumb.url %>
<%= link_to 'Edit', edit_pet_path(@pet) %> | <%= link_to 'Back', pets_path %>
Hierdoor wordt de miniatuurversie van de afbeelding weergegeven.
CarrierWave maakt het gemakkelijk om een eerder geupload bestand op een gekoppelde uploader te verwijderen met slechts een selectievakje. Ik zal je laten zien hoe je het moet doen.
Open uw formulierenbestand en voer een kleine aanpassing uit. Bewerk het om er als volgt uit te zien:
* App / views / huisdieren / _form.html.erb * <%= form_for @pet, html: multipart: true do |f| %> <% if @pet.errors.any? %><% end %><%= pluralize(@pet.errors.count, "error") %> verboden dit huisdier te redden:
<% @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 %>
In de bovenstaande code hebben we gecontroleerd of er al een afbeeldingsobject is. Als dat het geval is, tonen we de afbeelding en de optie om deze te verwijderen, maar als die er niet is, geven we alleen het veld weer om de afbeelding te uploaden.
Navigeer naar uw controller en voeg toe : remove_image naar je params. Laad uw bewerkingspagina opnieuw, kruis het vakje aan, klik op Update Pet, en de afbeelding zal worden verwijderd.
Er zijn verschillende manieren om dit te doen. Ik zal je een eenvoudige en snelle methode laten zien. Open uw huisdiermodel en plak in de onderstaande code:
* app / model / pet.rb validates_processing_of: afbeelding valideren: image_size_validation private def image_size_validation errors [: afbeelding] << "should be less than 500KB" if image.size > 0.5.megabytes einde
Dit zorgt ervoor dat geen afbeelding groter dan 500 KB wordt geüpload naar uw Rails-applicatie. Start je rails-server en kijk wat je hebt.
Nu weet u hoe u het uploaden van afbeeldingen in uw Rails-applicatie kunt inschakelen. Je hebt ook geleerd hoe je het formaat en de grootte kunt valideren en hoe je een afbeelding kunt verwijderen. In het volgende deel van deze serie zullen we kijken naar het gebruik van CarrierWave naast Devise.
