Share
Si está creando una aplicación web, definitivamente querrá habilitar la carga de imágenes. La carga de imágenes es una característica importante en las aplicaciones modernas, y se sabe que las imágenes son útiles en la optimización de motores de búsqueda..
En este tutorial (que es la primera parte de la serie de carga de imágenes de Rails), te mostraré cómo habilitar la carga de imágenes en tu aplicación Rails usando CarrierWave. Será una aplicación simple ya que el foco está en la carga de la imagen..
CarrierWave es una gema de Ruby que proporciona una manera simple y extremadamente flexible de cargar archivos desde aplicaciones de Ruby. Necesitas tener rieles en tu máquina para seguirlos. Para estar seguro, abra su terminal e ingrese el siguiente comando:
rieles -v
Eso te mostrará la versión de Rails que tienes instalada. Para este tutorial usaré la versión 4.2.4, que puede instalar así:
gema instalar rieles -v 4.2.4
Con eso hecho, eres bueno para ir.
Ahora crea un nuevo proyecto de Rails:
rieles nuevos mypets
Abre tu Gemfile y agrega las siguientes gemas.
* Gemfile * ... gema 'carrierwave', '~> 0.10.0' gema 'mini_magick', '~> 4.3' ...
La primera gema es para CarrierWave, y la segunda gema llamada mini_magick ayuda a cambiar el tamaño de las imágenes en su aplicación Rails. Con eso hecho, ejecute bundle install.
Genere un recurso de andamio para agregar la funcionalidad de CarrierWave. Ejecuta el siguiente comando desde tu terminal:
rieles g andamio Nombre del animal doméstico: cadena descripción: imagen de texto: cadena
Un andamio en Rails es un conjunto completo de modelos, migración de base de datos para ese modelo, controlador para manipularlo, vistas para ver y manipular los datos y un conjunto de pruebas para cada uno de los anteriores..
Migra tu base de datos a continuación:
rastrillo db: migrar
Debe crear un inicializador para CarrierWave, que se utilizará para cargar CarrierWave después de cargar ActiveRecord.
Navegar a config> inicializadores y crea un archivo: carrier_wave.rb.
Pega el siguiente código en él.
* config / initializers / carrier_wave.rb * require 'carrierwave / orm / activerecord'
Desde su terminal, genere un cargador:
Los carriles generan la imagen del cargador.
Esto creará un nuevo directorio llamado cargadores en la carpeta de la aplicación y un archivo dentro llamado image_uploader.rb. El contenido del archivo debería verse así:
Accentsconagua
* aplicación / uploaders / image_uploader.rb * # codificación: 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 algo # end # Crea diferentes versiones de tus archivos cargados: # version: thumb do # process: resize_to_fit => [50, 50] # end # Add a Lista blanca de extensiones que pueden ser cargadas. # Para las imágenes puede usar algo como esto: # def extension_white_list #% w (jpg jpeg gif png) # end # Anular el nombre del archivo de los archivos cargados: # Evite usar model.id o version_name aquí, vea uploader / store.rb para detalles # def filename # "something.jpg" si original_filename # end end Puedes editarlo para que se ajuste a lo que quieras. Déjame llevarte a través de esto.
Primero, descomenta la línea MiniMagick. Eso debería ser la línea 7..
... incluye CarrierWave :: MiniMagick ...
Necesitas esto para generar diferentes versiones de una imagen. Si desea generar una versión en miniatura de las imágenes cargadas, ya hay un formulario de código incluido en el archivo image_uploader para usted. Descomente el bloque de código de versión como se muestra a continuación:
… Versión: proceso de procesamiento de pulgar: resize_to_fill => [50, 50] end ...
También puedes agregar diferentes versiones usando el mismo formato..
Para el propósito de este tutorial, guardaremos en el archivo y no en la niebla. La niebla es la biblioteca de servicios en la nube de Ruby. Le mostraré cómo ponerlo en uso en otra parte de esta serie. Así que deja tu opción de almacenamiento como está.
Por motivos de seguridad, ciertos archivos pueden representar una amenaza si se permite que se carguen en la ubicación incorrecta. CarrierWave le permite especificar una lista blanca de extensiones permitidas. Debería ver un método que se parece a lo que tengo a continuación, así que descoméntelo..
... def extension_white_list% w (jpg jpeg gif png) final ...
Es hora de montar tu cargador. Navega a tu modelo y pega el código a continuación.
* app / model / pet.rb * mount_uploader: image, ImageUploader
Vaya a sus vistas y edítelo para que se parezca a lo que tengo a continuación:
app / views / pets / _form.html.erb <%= form_for @pet, html: multipart: true do |f| %> <% if @pet.errors.any? %><% end %><%= pluralize(@pet.errors.count, "error") %> prohibido que esta mascota se salve:
<% @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 %>
Abra su terminal e inicie su servidor de rieles: rieles.
Apunte su navegador a http: // localhost: 3000 / pets. Debería poder agregar una nueva mascota ingresando un nombre y una descripción y cargando una imagen. La imagen no se muestra después de subir con éxito. Déjame mostrarte cómo arreglar eso.
Vaya a la página de su programa donde está mostrando la imagen y edítela para que se ajuste a lo que tengo a continuación:
* app / views / pets / show.html.erb *<%= notice %>
Nombre: <%= @pet.name %>
Descripción: <%= @pet.description %>
Imagen: <%= image_tag @pet.image.thumb.url %>
<%= link_to 'Edit', edit_pet_path(@pet) %> | <%= link_to 'Back', pets_path %>
Esto mostrará la versión en miniatura de la imagen..
CarrierWave facilita la eliminación de un archivo cargado previamente en un cargador montado con solo una casilla de verificación. Te mostraré como hacerlo.
Abra su archivo de formulario y haga un pequeño ajuste. Edítalo para que se vea así:
* app / views / pets / _form.html.erb * <%= form_for @pet, html: multipart: true do |f| %> <% if @pet.errors.any? %><% end %><%= pluralize(@pet.errors.count, "error") %> prohibido que esta mascota se salve:
<% @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 %>
En el código anterior, verificamos si ya existe un objeto de imagen. Si la hay, mostramos la imagen y la opción para eliminarla, pero si no hay ninguna, solo mostramos el campo para cargar la imagen.
Navega hasta tu controlador y agrega :quita la imagen a tus params Recargue su página de edición, marque la casilla, haga clic en Actualizar mascota, y la imagen será eliminada.
Hay diferentes medios para hacer esto. Te mostraré un método fácil y rápido. Abre tu modelo de mascota y pega el siguiente código:
* app / model / pet.rb validates_processing_of: image validate: image_size_validation private def errores de image_size_validation [: image] << "should be less than 500KB" if image.size > Fin de 0.5.megabytes
Esto ayudará a garantizar que ninguna imagen superior a 500 KB se cargue en su aplicación Rails. Enciende tu servidor de rieles y revisa lo que tienes.
Ahora ya sabe cómo habilitar la carga de imágenes en su aplicación Rails. También aprendió a validar el formato y el tamaño, así como a eliminar una imagen. En la siguiente parte de esta serie, veremos cómo usar CarrierWave junto con Devise.
