Share
Om du bygger en webbapplikation vill du definitivt aktivera uppladdning av bilder. Bildöverföring är en viktig funktion i moderna applikationer, och bilder har visat sig vara användbara vid sökmotoroptimering.
I den här handledningen (som är den första delen av Rails Image Uploading-serien) kommer jag att visa dig hur du aktiverar bilduppladdning i din Rails-applikation med hjälp av CarrierWave. Det kommer att bli en enkel applikation, eftersom fokus ligger på bilduppladdning.
CarrierWave är en Ruby-pärla som ger ett enkelt och extremt flexibelt sätt att ladda upp filer från Ruby-applikationer. Du måste ha Rails på din maskin för att följa med. För att vara säker, öppna din terminal och ange kommandot nedan:
rails -v
Det visar dig vilken version av Rails du har installerat. För denna handledning använder jag version 4.2.4, som du kan installera så här:
pärla monteringsskenor -v 4.2.4
Med det gjort är du bra att gå.
Skapa nu ett nytt Rails-projekt:
skenor nya mypets
Öppna din Gemfile och lägg till följande pärlor.
* Gemfile * ... pärla 'carrierwave', '~> 0.10.0' pärla 'mini_magick', '~> 4.3' ...
Den första pärlan är för CarrierWave, och den andra pärla som heter mini_magick hjälper till med att ändra storlek på bilder i din Rails-applikation. Med det gjort kör installationspaketet.
Skapa en byggnadsresurs för att lägga till CarrierWaves funktionalitet. Kör följande kommando från din terminal:
skenor g ställning Djurnamn: strängbeskrivning: textbild: sträng
En byggnadsställning i Rails är en komplett uppsättning modell, databasmigrering för den modellen, styrenheten för att manipulera den, visningar för att visa och manipulera data och en testpaket för var och en av ovanstående.
Migrera din databas nästa:
rake db: migrera
Du måste skapa en initializer för CarrierWave, som kommer att användas för att ladda CarrierWave efter att du laddat ActiveRecord.
Navigera till config> initialisatorer och skapa en fil: carrier_wave.rb.
Klistra in koden nedan i den.
* config / initializers / carrier_wave.rb * kräver 'carrierwave / orm / activiverecord'
Skapa en uppladdare från din terminal:
rails generera uploader Image
Detta skapar en ny katalog som heter uppladdare i appmappen och en fil som heter image_uploader.rb. Innehållet i filen ska se så här ut:
Accentsconagua
* app / uppladdare / image_uploader.rb * # kodning: utf-8 klass 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 skala (bredd, höjd) # # gör något # slutet # Skapa olika versioner av dina uppladdade filer: # version: thumb do # process: resize_to_fit => [50, 50] # end # Lägg till en vit lista över tillägg som får laddas upp. # För bilder kan du använda något av följande: # def extension_white_list #% w (jpg jpeg gif png) # end # Åsidosätt filnamn för de uppladdade filerna: # Undvik att använda model.id eller versionsnamn här, se uploader / store.rb för detaljer. # def filnamn # "something.jpg" om original_filename # slutänden Du kan redigera den så att den passar vad du vill. Låt mig ta dig igenom det.
Först, uncomment MiniMagick-raden. Det ska vara linje 7.
... inkluderar CarrierWave :: MiniMagick ...
Du behöver detta för att skapa olika versioner av en bild. Om du vill skapa en miniatyrversion av uppladdade bilder finns det redan ett kodformulär som ingår i filen Image_uploader för dig. Uncomment versionskodsblocket som visas nedan:
... version: tummen gör processen: resize_to_fill => [50, 50] slutet ...
Du kan också lägga till olika versioner med samma format.
För denna handledning ska vi spara till fil och inte dimma. Dimma är Ruby Cloud Service Library. Jag ska visa dig hur du ska använda den i en annan del av denna serie. Så lämna ditt lagringsalternativ som det är.
Av säkerhetsskäl kan vissa filer utgöra ett hot om de får laddas upp till fel plats. Med CarrierWave kan du ange en vitlista med tillåtna tillägg. Du borde se en metod som ser ut som vad jag har nedan, så uncomment det.
... def extension_white_list% w (jpg jpeg gif png) sluta ...
Det är dags att montera din uppladdare. Navigera till din modell och klistra in koden nedan.
* app / model / pet.rb * mount_uploader: bild, ImageUploader
Gå till dina åsikter och rediger den för att se ut som vad jag har nedan:
app / vyer / husdjur / _form.html.erb <%= form_for @pet, html: multipart: true do |f| %> <% if @pet.errors.any? %><% end %><%= pluralize(@pet.errors.count, "error") %> förbjudet att detta husdjur sparas:
<% @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 %>
Öppna din terminal och starta din railserver: skenor s.
Peka din webbläsare till http: // localhost: 3000 / pets. Du ska kunna lägga till ett nytt husdjur genom att ange ett namn och en beskrivning och ladda upp en bild. Bilden visas inte efter lyckad uppladdning. Låt mig visa dig hur man fixar det.
Navigera till din visningssida där du visar bilden och redigera den så att den passar vad jag har nedan:
* App / vyer / husdjur / show.html.erb *<%= notice %>
Namn: <%= @pet.name %>
Beskrivning: <%= @pet.description %>
Bild: <%= image_tag @pet.image.thumb.url %>
<%= link_to 'Edit', edit_pet_path(@pet) %> | <%= link_to 'Back', pets_path %>
Detta kommer att visa miniatyrversionen av bilden.
CarrierWave gör det enkelt att ta bort en tidigare uppladdad fil på en monterad uppladdare med bara en kryssruta. Jag ska visa dig hur man gör det.
Öppna din formfil och gör lite justering. Redigera det så att det ser ut så här:
* App / vyer / husdjur / _form.html.erb * <%= form_for @pet, html: multipart: true do |f| %> <% if @pet.errors.any? %><% end %><%= pluralize(@pet.errors.count, "error") %> förbjudet att detta husdjur sparas:
<% @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 %>
I koden ovan kontrollerade vi om det redan finns ett bildobjekt. Om det finns, visar vi bilden och alternativet att ta bort det, men om det inte finns någon, visar vi bara fältet för att ladda upp bilden.
Navigera till din controller och lägg till : remove_image till dina parametrar. Ladda om din redigera sida, kryssa i rutan, klicka på Uppdatera husdjur, och bilden kommer att tas bort.
Det finns olika sätt att göra detta. Jag ska visa dig en enkel och snabb metod. Öppna din husdjursmodell och klistra in i koden nedan:
* app / model / pet.rb validates_processing_of: image validate: image_size_validation privat def image_size_validation errors [: bild] << "should be less than 500KB" if image.size > 0.5.megabytes slut
Detta kommer att bidra till att ingen bild som överstiger 500 kB laddas upp till din Rails-applikation. Starta din railserver och kolla vad du har.
Nu vet du hur du aktiverar bilduppladdning i din Rails-applikation. Du har också lärt dig hur du validerar formatet och storleken, samt att radera en bild. I nästa del av denna serie kommer vi att titta på hur man använder CarrierWave tillsammans med Devise.
