Share
Se stai realizzando un'applicazione web, vorresti sicuramente abilitare il caricamento delle immagini. Il caricamento delle immagini è una caratteristica importante nelle applicazioni dei giorni nostri e le immagini sono state ritenute utili nell'ottimizzazione dei motori di ricerca.
In questo tutorial (che è la prima parte della serie di upload di Rails Image), ti mostrerò come abilitare il caricamento delle immagini nell'applicazione Rails usando CarrierWave. Sarà una semplice applicazione poiché l'attenzione si concentra sul caricamento delle immagini.
CarrierWave è una gemma di Ruby che fornisce un modo semplice ed estremamente flessibile per caricare file dalle applicazioni Ruby. È necessario disporre di Rails sulla macchina per seguire. Per sicurezza, apri il tuo terminale e inserisci il comando qui sotto:
rotaie -v
Questo ti mostrerà la versione di Rails che hai installato. Per questo tutorial userò la versione 4.2.4, che puoi installare in questo modo:
gem install rails -v 4.2.4
Fatto questo, sei a posto.
Ora crea un nuovo progetto Rails:
rota nuovi mypets
Apri il tuo Gemfile e aggiungi le seguenti gemme.
* Gemfile * ... gem 'carrierwave', '~> 0.10.0' gem 'mini_magick', '~> 4.3' ...
La prima gemma è per CarrierWave, e la seconda gemma chiamata mini_magick aiuta a ridimensionare le immagini nell'applicazione Rails. Fatto ciò, esegui l'installazione di bundle.
Genera una risorsa scaffold per aggiungere le funzionalità di CarrierWave. Esegui il seguente comando dal tuo terminale:
rails g scaffold Nome dell'animale domestico: descrizione stringa: immagine del testo: stringa
Uno scaffold in Rails è un set completo di modello, migrazione del database per quel modello, controller per manipolarlo, visualizzazioni per visualizzare e manipolare i dati e una suite di test per ciascuno dei precedenti.
Migrate il vostro database successivo:
rake db: migrate
È necessario creare un inizializzatore per CarrierWave, che verrà utilizzato per caricare CarrierWave dopo aver caricato ActiveRecord.
Navigare verso config> inizializzatori e creare un file: carrier_wave.rb.
Incolla il codice qui sotto.
* config / initializers / carrier_wave.rb * richiede 'carrierwave / orm / activerecord'
Dal tuo terminale, genera un uploader:
rails genera immagine uploader
Questo creerà una nuova directory chiamata uploader nella cartella dell'app e un file all'interno chiamato image_uploader.rb. Il contenuto del file dovrebbe assomigliare a questo:
Accentsconagua
* codec app / uploaders / image_uploader.rb * #: ImageUploader della classe utf-8 < 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 scala (larghezza, altezza) # # fai qualcosa # fine # Crea diverse versioni dei tuoi file caricati: # versione: thumb do # process: resize_to_fit => [50, 50] # end # Aggiungi a lista bianca di estensioni che possono essere caricate. # Per le immagini potresti usare qualcosa del genere: # def extension_white_list #% w (jpg jpeg gif png) # end # Sostituisci il nome file dei file caricati: # Evita di usare model.id o version_name qui, vedi uploader / store.rb per dettagli. # def filename # "something.jpg" se nome_file originale # fine fine Puoi modificarlo per adattarlo a ciò che desideri. Lascia che ti accompagni.
Innanzitutto, decommenta la linea MiniMagick. Dovrebbe essere la linea 7.
... includi CarrierWave :: MiniMagick ...
Ne hai bisogno per generare versioni diverse di un'immagine. Se si desidera generare una versione di anteprima delle immagini caricate, è già presente un modulo di codice incluso nel file image_uploader. Decommentare il blocco del codice di versione come mostrato di seguito:
... versione: thumb do process: resize_to_fill => [50, 50] fine ...
Puoi anche aggiungere versioni differenti usando lo stesso formato.
Ai fini di questo tutorial, salveremo il file e non la nebbia. La nebbia è la libreria del servizio cloud Ruby. Ti mostrerò come metterlo in pratica in un'altra parte di questa serie. Quindi lascia la tua opzione di archiviazione così com'è.
Per motivi di sicurezza, alcuni file potrebbero rappresentare una minaccia se possono essere caricati nella posizione sbagliata. CarrierWave ti consente di specificare un white-list delle estensioni consentite. Dovresti vedere un metodo che assomiglia a quello che ho qui sotto, quindi commentalo.
... def extension_white_list% w (jpg jpeg gif png) fine ...
È ora di montare il tuo uploader. Vai al tuo modello e incolla il codice qui sotto.
* app / model / pet.rb * mount_uploader: image, ImageUploader
Vai alle tue visualizzazioni e modificale per assomigliare a quello che ho di seguito:
app / views / animali / _form.html.erb <%= form_for @pet, html: multipart: true do |f| %> <% if @pet.errors.any? %><% end %><%= pluralize(@pet.errors.count, "error") %> vietato il salvataggio di questo animale domestico:
<% @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 %>
Apri il tuo terminale e avvia il tuo server di rotaie: rotaie s.
Puntare il browser su http: // localhost: 3000 / pets. Dovresti essere in grado di aggiungere un nuovo animale domestico inserendo un nome e una descrizione e caricando un'immagine. L'immagine non viene visualizzata dopo il caricamento riuscito. Lascia che ti mostri come risolverlo.
Passa alla tua pagina di presentazione in cui stai visualizzando l'immagine e modificala per adattarla a ciò che ho di seguito:
* App / views / animali / show.html.erb *<%= notice %>
Nome: <%= @pet.name %>
Descrizione: <%= @pet.description %>
Immagine: <%= image_tag @pet.image.thumb.url %>
<%= link_to 'Edit', edit_pet_path(@pet) %> | <%= link_to 'Back', pets_path %>
Questo mostrerà la versione in miniatura dell'immagine.
CarrierWave semplifica la rimozione di un file precedentemente caricato su un uploader montato con solo una casella di controllo. Ti mostrerò come farlo.
Apri il tuo file di modulo e fai un piccolo aggiustamento. Modifica per assomigliare a questo:
* App / views / animali / _form.html.erb * <%= form_for @pet, html: multipart: true do |f| %> <% if @pet.errors.any? %><% end %><%= pluralize(@pet.errors.count, "error") %> vietato il salvataggio di questo animale domestico:
<% @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 %>
Nel codice sopra, abbiamo controllato se esiste già un oggetto immagine. Se c'è, mostriamo l'immagine e l'opzione per rimuoverla, ma se non ce n'è, mostriamo solo il campo per caricare l'immagine.
Passare al controller e aggiungere : remove_image ai tuoi param. Ricarica la tua pagina di modifica, spunta la casella, clicca su Aggiorna Pet, e l'immagine sarà rimossa.
Ci sono diversi modi per farlo. Ti mostrerò un metodo facile e veloce. Apri il tuo modello di animale domestico e incolla il codice qui sotto:
* app / model / pet.rb validates_processing_of: image validate: image_size_validation private def image_size_validation errors [: image] << "should be less than 500KB" if image.size > Fine 0,5.megabytes
Ciò contribuirà a garantire che nessuna immagine superiore a 500 KB venga caricata nell'applicazione Rails. Avvia il tuo server di rotaie e controlla quello che hai.
Ora sai come abilitare il caricamento delle immagini nella tua applicazione Rails. Hai anche imparato come convalidare il formato e le dimensioni, oltre a eliminare un'immagine. Nella parte successiva di questa serie, vedremo come utilizzare CarrierWave insieme a Devise.
