[RAILS] [Débutant] À propos du stockage actif

introduction

Je suis un débutant dans l'apprentissage de la programmation pendant environ 3 mois pour la première fois, mais j'aimerais garder un mémorandum de ce que j'ai appris dans le tutoriel Rails. Cet article a été rédigé en référence au didacticiel Rails.

Qu'est-ce que le stockage actif?

Le moyen le plus pratique de télécharger des fichiers dans Rails est d'utiliser une fonctionnalité appelée Active Storage intégrée à Rails. Avec cela, vous pouvez facilement créer une fonction de publication d'image, etc. avec un formulaire. Avec Active Storage dans votre application, vous pouvez utiliser ImageMagick pour convertir les téléchargements d'images, générer des représentations d'images sans téléchargement d'images telles que des PDF et des vidéos, et extraire des métadonnées à partir de fichiers arbitraires.

Activer le stockage actif

$ rails active_storage:install
$ rails db:migrate

Cette migration produit deux tables nommées active_storage_blobs et active_storage_attachments. ｀ active_storage_blobsest la table où les fichiers réellement téléchargés sont stockés, etactive_storage_attachments` est la table intermédiaire.

Ajouter un fichier

Cette fois, supposons que vous ajoutiez une image au modèle Micropost.

micropost.rb

class Micropost < ApplicationRecord
 has_one_attached :image
end

: image est le nom du fichier, et vous pouvez utiliser ce que vous voulez, comme: photo ,: avatar, etc., selon le but du fichier. La méthode has_one_attached est utilisée pour associer le modèle spécifié au fichier téléchargé. Dans ce cas, spécifiez l'image à associer au modèle «Micropost».

Ajoutez ensuite la balise file_fiele au formulaire du micro-message.

ruby:app/views/shared/_micropost_form.html.erb

<%= form_with model: @micropost, local: true  do |f| %>
  <%= f.text_area :content %>
  <%= f.file_field :image %>
  <%= f.submit %>
<% end %>

Enfin, mettez à jour le contrôleur Microposts pour vous permettre d'ajouter des images à l'objet micropost nouvellement créé. L'API Actuve Storage fournit une méthode attach pour cela, que vous pouvez utiliser. Plus précisément, dans l'action create du contrôleur Microposts, attachez l'image téléchargée à l'objet @ micropost. Pour permettre ce téléchargement, vous devez également mettre à jour la méthode micropost_params pour ajouter: image à la liste des attributs autorisés afin qu'elle puisse être mise à jour via le Web.

microposts_controller.rb

class MicropostsController < ApplicationController
 def create
    @micropost = current_user.microposts.build(micropost_params)
    @micropost.image.attach(params[:micropost][:image])
    if @micropost.save
      flash[:success] = "Micropost created!"
      redirect_to root_url
    else
      @feed_items = current_user.feed.paginate(page: params[:page])
      render 'static_pages/home'
    end
  end

  private

    def micropost_params
      params.require(:micropost).permit(:content, :image)
    end
 end

Une fois l'image téléchargée, vous pouvez utiliser l'assistant micropost partial'image_tagpour dessiner (rendre) lemicropost.image` associé. De plus, étant donné que le message peut ou non avoir une image jointe (uniquement du texte sans image, etc.), est-ce un message avec une image attachée à l'aide d'une méthode qui renvoie une valeur logique de «attaché?»? Vérifiez si le message n'est pas joint et si une image est jointe, affichez l'image.

ruby:app/views/microposts/_micropost.html.erb

 <%= image_tag micropost.image if micropost.image.attached? %>

Verification de l'image

Le téléchargeur ci-dessus présente des inconvénients notables. En particulier, il n'y a pas de restrictions sur les images téléchargées, donc si un utilisateur lève un fichier volumineux ou un fichier invalide, des problèmes se produiront. Pour corriger cette lacune, implémentez la validation de la taille et du format de l'image. Active Storage ne prend pas en charge nativement ces fonctionnalités de formatage et de validation. Ajoutez donc un joyau pour la validation Active Storage.

Gemfile

gem 'active_storage_validations'

N'oubliez pas d'exécuter l'installation du bundle.

$ bundle install

Si vous lisez la documentation de ce joyau, vous verrez que vous pouvez valider l'image en inspectant le content_type comme suit:

content_type: { in: %w[image/jpeg image/gif image/png],
                message: "must be a valid image format" }

Cela vérifiera les images qui correspondent aux formats d'image pris en charge.

De même, la taille du fichier peut être validée comme suit:

size: { less_than: 5.megabytes,
        message: "should be less than 5MB" }

Cette fois, nous limiterons la taille de l'image à 5 Mo. Ajoutez ces validations à votre modèle Micropost.

micropost.rb

class Micropost < ApplicationRecord
 validates :image,   content_type: { in: %w[image/jpeg image/gif image/png],
                                      message: "must be a valid image format" },
                      size:         { less_than: 5.megabytes,
                                      message: "should be less than 5MB" }
end

En plus de ces validations, nous ajouterons également un mécanisme pour vérifier la taille et le format des téléchargements d'images côté client (c'est-à-dire le navigateur). Ajoutons un peu de JavaScript (spécifiquement jQuery) et obtenons une alerte lorsque l'image que l'utilisateur essaie de télécharger est trop grande (de cette façon, l'utilisateur perd du temps à télécharger). Vous n'avez pas à le faire et la charge sur le serveur est plus légère).

ruby:app/views/shared/_micropost_form.html.erb

<script type="text/javascript">
  $("#micropost_image").bind("change", function() {
    var size_in_megabytes = this.files[0].size/1024/1024;
    if (size_in_megabytes > 5) {
      alert("Maximum file size is 5MB. Please choose a smaller file.");
      $("#micropost_image").val("");
    }
  });
</script>

Cela vous avertira avec la méthode alert si la taille du fichier est trop grande.

Enfin, vous pouvez utiliser le paramètre accept dans la balise d'entrée file_field pour indiquer à l'utilisateur que vous ne pouvez télécharger que dans un format valide.

ruby:app/views/shared/_micropost_form.html.erb

<%= f.file_field :image, accept: "image/jpeg,image/gif,image/png" %>

Seuls les formats d'image valides peuvent être sélectionnés initialement et les autres types de fichiers sont grisés.

Redimensionnement de l'image

Pour redimensionner une image, vous avez besoin d'un programme qui manipule l'image. Cette fois, nous utiliserons un programme appelé ImageMagick, donc installez-le dans l'environnement de développement. (Si l'environnement de production est Heroku, vous pouvez déjà utiliser` ImageMagick dans l'environnement de production.)

Dans l'IDE cloud, vous pouvez installer ce programme avec la commande suivante:

$ sudo apt-get -y install imagemagick

Si vous n'utilisez pas d'EDI cloud ou d'environnement Linux équivalent, la procédure d'installation d'ImagiMagick variera en fonction de votre environnement. Par exemple, sur un Mac, vous ne pouvez pas l'installer avec la commande brew install imagemagick à moins que Homebrew soit installé.

Comment installer pour Homebrew

$ brew install imagemagick

Ensuite, nous avons besoin de quelques gemmes pour le traitement d'image. Il nécessite image_processing gem et mini_magick gem, qui est un processeur Ruby ImageMagick.

Gemfile

gem 'image_processing'
gem 'mini_magick'

$ bundle install

Vous devrez probablement redémarrer le serveur Rails après l'installation.

méthode variat

Vous pourrez créer des images converties avec la méthode variante fournie par Active Storage. En particulier, utilisez l'option resize_to_limit pour contraindre la largeur et la hauteur de l'image afin qu'elle ne dépasse pas 500 pixels, comme indiqué ci-dessous.

image.variant(resize_to_limit: [500, 500])

Ce code est placé séparément dans la méthode display_image pour plus de commodité.

micropost.rb

#Renvoie une image redimensionnée pour l'affichage
def display_image
 imge.variant(resize_to_limit: [500, 500])
end

Vous pouvez maintenant utiliser display_image avec des partiels micropost.

ruby:app/views/microposts/_micropost.html.erb

<%= image_tag micropost.display_image if micropost.image.attached? %>