Share
Hvis du bygger et webprogram, vil du definitivt ønske å aktivere bildeopplasting. Bildopplasting er en viktig funksjon i moderne applikasjoner, og bilder har vært kjent for å være nyttige i søkemotoroptimalisering.
I denne veiledningen (som er den første delen av Rails Image Uploading-serien), vil jeg vise deg hvordan du aktiverer bildeopplasting i din Rails-applikasjon ved hjelp av CarrierWave. Det blir en enkel applikasjon som fokus ligger på bildeopplasting.
CarrierWave er en Ruby perle som gir en enkel og ekstremt fleksibel måte å laste opp filer fra Ruby applikasjoner. Du må ha Rails på maskinen din for å følge med. For å være sikker, åpne opp terminalen din og skriv inn kommandoen nedenfor:
skinner -v
Det vil vise deg versjonen av Rails du har installert. For denne opplæringen bruker jeg versjon 4.2.4, som du kan installere slik:
perle installasjonsskinner - v 4.2.4
Med det gjort, er du god til å gå.
Opprett nå et nytt Rails prosjekt:
skinner nye mypets
Åpne opp Gemfile og legg til følgende edelstener.
* Gemfile * ... perle 'carrierwave', '~> 0.10.0' perle 'mini_magick', '~> 4.3' ...
Den første perlen er for CarrierWave, og den andre perlen som heter mini_magick, hjelper med å endre størrelsen på bildene i din Rails-applikasjon. Med det gjort, kjør bundle installere.
Generer en stillasressurs for å legge til CarrierWaves funksjonalitet. Kjør følgende kommando fra terminalen din:
skinner g stillas Dyrnavn: strengbeskrivelse: tekstbilde: streng
Et stillas i Rails er et komplett sett med modell, database migrering for den modellen, kontrolleren for å manipulere den, visninger for å se og manipulere dataene, og en testpakke for hver av de ovennevnte.
Overfør databasen din neste gang:
rake db: migrere
Du må opprette en initialiserer for CarrierWave, som vil bli brukt til å laste CarrierWave etter at du har lastet ActiveRecord.
Navigere til config> initiativer og opprett en fil: carrier_wave.rb.
Lim inn koden under i den.
* config / initializers / carrier_wave.rb * krever 'carrierwave / orm / activiverecord'
Fra din terminal, generer en opplaster:
skinner genererer opplastingsbilde
Dette vil opprette en ny katalog som heter opplastere i appmappen og en fil som er innkalt image_uploader.rb. Innholdet i filen skal se slik ut:
Accentsconagua
* app / opplastere / image_uploader.rb * # koding: 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 skala (bredde, høyde) # # gjør noe # slutt # Opprett forskjellige versjoner av dine opplastede filer: # versjon: thumb do # process: resize_to_fit => [50, 50] # end # Legg til en hvit liste over utvidelser som kan lastes opp. # For bilder kan du bruke noe slikt: # def extension_white_list #% w (jpg jpeg gif png) # end # Overstyr filnavnet til de opplastede filene: # Unngå å bruke model.id eller versionsnavn her, se opplastingsprogrammet / store.rb for detaljer. # def filnavn # "something.jpg" hvis original_filename # end-end Du kan redigere den slik at den passer til det du vil. La meg ta deg gjennom det.
Først, uncomment MiniMagick-linjen. Det burde være linje 7.
... inkluderer CarrierWave :: MiniMagick ...
Du trenger dette for å generere forskjellige versjoner av et bilde. Hvis du vil generere en miniatyrversjon av bilder lastet opp, er det allerede et kodeform som er inkludert i image_uploader-filen for deg. Uncomment versjonskoden blokk som vist nedenfor:
... versjon: tommel gjør prosess: resize_to_fill => [50, 50] end ...
Du kan også legge til forskjellige versjoner med samme format.
For formålet med denne opplæringen lagrer vi fil og ikke tåke. Tåke er Ruby Cloud Service Library. Jeg vil vise deg hvordan du skal sette den i bruk i en annen del av denne serien. Så la opp lagringsalternativet ditt som det er.
Av sikkerhetsmessige årsaker kan enkelte filer utgjøre en trussel hvis de må lastes opp til feil sted. CarrierWave lar deg angi en hvitliste over tillatte utvidelser. Du bør se en metode som ser ut som hva jeg har under, så uncomment det.
... def extension_white_list% w (jpg jpeg gif png) slutten ...
Det er på tide å montere opplasteren din. Naviger til din modell og lim inn koden nedenfor.
* app / model / pet.rb * mount_uploader: bilde, ImageUploader
Gå til dine synspunkter og rediger den for å se ut som jeg har under:
app / visninger / kjæledyr / _form.html.erb <%= form_for @pet, html: multipart: true do |f| %> <% if @pet.errors.any? %><% end %><%= pluralize(@pet.errors.count, "error") %> forbudt at dette kjæledyret blir lagret:
<% @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 %>
Åpne terminalen din og start din railserver: skinner s.
Pek nettleseren din til http: // localhost: 3000 / pets. Du bør kunne legge til et nytt kjæledyr ved å skrive inn et navn og en beskrivelse og laste opp et bilde. Bildet vises ikke etter vellykket opplasting. La meg vise deg hvordan du kan fikse det.
Naviger til visningssiden din der du viser bildet, og rediger det for å passe til det jeg har under:
* App / visninger / kjæledyr / show.html.erb *<%= notice %>
Navn: <%= @pet.name %>
Beskrivelse: <%= @pet.description %>
Bilde: <%= image_tag @pet.image.thumb.url %>
<%= link_to 'Edit', edit_pet_path(@pet) %> | <%= link_to 'Back', pets_path %>
Dette vil vise miniatyrversjonen av bildet.
CarrierWave gjør det enkelt å fjerne en tidligere opplastet fil på en montert opplastingsfil med bare en avkrysningsboks. Jeg vil vise deg hvordan du gjør det.
Åpne opp skjemafilen din og foreta en liten justering. Rediger det for å se slik ut:
* App / visninger / kjæledyr / _form.html.erb * <%= form_for @pet, html: multipart: true do |f| %> <% if @pet.errors.any? %><% end %><%= pluralize(@pet.errors.count, "error") %> forbudt at dette kjæledyret blir lagret:
<% @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 ovenfor sjekket vi om det allerede er et bildeobjekt. Hvis det er, viser vi bildet og muligheten til å fjerne det, men hvis det ikke finnes noen, viser vi bare feltet for å laste opp bildet.
Naviger til kontrolleren din og legg til : remove_image til parametrene dine. Oppdater siden din, merk av i boksen, klikk på Oppdater kjæledyr, og bildet vil bli fjernet.
Det er forskjellige måter å gjøre dette på. Jeg vil vise deg en enkel og rask metode. Åpne kjæledyrmodellen din og lim inn koden under:
* app / model / pet.rb validates_processing_of: bilde validere: image_size_validation private def image_size_validation errors [: image] << "should be less than 500KB" if image.size > 0.5.megabytes ende
Dette vil bidra til at ingen bilder større enn 500 KB blir lastet opp til din Rails-applikasjon. Start din railserver og sjekk ut hva du har.
Nå vet du hvordan du aktiverer bildeopplasting i programmet Rails. Du har også lært å validere formatet og størrelsen, samt å slette et bilde. I neste del av denne serien ser vi på hvordan du bruker CarrierWave sammen med Devise.
