[RUBY] Téléchargez facilement plusieurs images avec rails rails + carrierwave + cloudinary

1. Vue d'ensemble

Lorsque vous souhaitez créer une application qui utilise la publication d'images avec des rails, de nombreuses personnes souhaitent publier plusieurs images à la fois. Cette fois-ci, tout en développant une application de publication de rails simple, nous la mettrons en œuvre pour que plusieurs images puissent être affichées.

• Cette publication d'image se fera en utilisant cloudinary.

2. Présentation

Environnement de développement

environnement

ruby 2.6.3
Rails 6.0.3

Prévu pour l'achèvement

Avant de commencer: inscrivez-vous à Cloudinary

Commencez à vous inscrire à partir de ce lien. https://cloudinary.com/

Appuyez sur Inscrivez-vous gratuitement en haut à droite pour accéder à l'écran d'inscription. Après avoir enregistré diverses informations et terminé l'enregistrement temporaire, veuillez ouvrir le message d'enregistrement final envoyé à votre adresse e-mail et terminer l'enregistrement principal.

3. Mise en œuvre de la fonction de publication d'images multiples

3.1. Préparation

Tout d'abord, afin d'implémenter la fonction de publication d'images multiples, nous allons créer un exemple d'application qui publie uniquement.

Terminal

$ cd
$ cd desktop
$ rails new ImageSample

3.2. Fonctions autour de la publication

Les fonctions autour de la publication sont créées à l'aide d'un échafaudage. À ce moment-là, créez plusieurs colonnes d'image. Cette fois, nous pourrons publier deux images, image1 et image2, en même temps. Si vous souhaitez publier 3 ou plus en même temps, essayez d'augmenter les colonnes avec image3 et image4.

Terminal

$ cd ImageSample
$ rails g scaffold post body:text image1:string image2:string
$ rails db:migrate

3.3. Afficher les modifications (nouvelle page de message)

Modifiez _form.html.erb afin de pouvoir sélectionner l'image sur la nouvelle page de publication.

ruby:posts/_form.html.erb

  #Changer avant
<%= form.text_field :image1 %>

  #Après le changement
<%= form.file_field :image1 %>

Apportez des modifications similaires à image2.

3.4. Afficher les modifications (page de la liste des publications)

ruby:posts/index.html.erb

  #Changer avant
<td><%= post.image1 %></td>

  #Après le changement
<td><%= image_tag post.image1_url ,size: '200x150' %></td>

Apportez des modifications similaires à image2. En ce qui concerne la taille: '200x150', il n'y a pas de problème si vous ne l'écrivez pas, mais je l'ai écrit pour éviter que l'image ne se propage pour remplir l'écran.

3.5.voir le changement (page de détails de l'article)

C'est fondamentalement le même que la page de liste de messages.

ruby:posts/show.html.erb

  #Changer avant
<%= @post.image1 %>

  #Après le changement
<%= image_tag @post.image1_url ,size: '200x150' %>

Apportez des modifications similaires à image2.

3.6. Ajout de gemme

Gemfile

gem 'carrierwave'
gem 'cloudinary'
gem 'dotenv-rails'

Une fois ajouté,

Terminal

$ bundle install

Refléter.

3.7. Téléchargeur

Créer un uploader

Créez un uploader avec le générateur CarrierWave.

Terminal

$ rails g uploader Image

Modification du modèle

Modifiez app / models / post.rb comme suit.

app/models/post.rb

class Post < ApplicationRecord
    mount_uploader :image1, ImageUploader
    mount_uploader :image2, ImageUploader
end

Paramètres de l'uploader

Modifiez les lignes 6 à 8 de app / uploaders / image_uploader.rb.

app/uploaders/image_uploader.rb

  # Choose what kind of storage to use for this uploader:
  storage :file
  # storage :fog

Modifiez ce qui précède comme indiqué dans la figure ci-dessous.

app/uploader/image_uploader.rb

  # Choose what kind of storage to use for this uploader:
  if Rails.env.production?
    include Cloudinary::CarrierWave
    CarrierWave.configure do |config|
      config.cache_storage = :file
    end
  else
    storage :file
  end
  # storage :fog

3.8 Clé API cloudinary

fichier .env

Créez vous-même un fichier appelé .env dans le répertoire de l'application (le répertoire où se trouvent app, db et Gemfile). Entrez ensuite ce qui suit dans le fichier .env que vous avez créé:

.env

CLOUD_NAME=q0w9e8r7t6yu5  #← Cette valeur varie d'une personne à l'autre! !!
CLOUDINARY_API_KEY=123456789012345 #← Cette valeur varie d'une personne à l'autre! !!
CLOUDINARY_API_SECRET=1a2s3d4f5g6h7j8k9l0a1s2d4f5g6h1q #← Cette valeur varie d'une personne à l'autre! !!

Utilisez le «nom du cloud», la «clé API» et le «secret API» du compte Cloudinary acquis. Ici, réécrivez chaque valeur après "=" avec la clé obtenue à partir de Ma page de Cloudinary plus tôt (le nombre varie selon l'individu).

.gitignore Ajoutez ce qui suit à .gitignore dans le répertoire de l'application.

.gitignore

/.env

cloudinary.yml Créez un fichier cloudinary.yml dans le dossier config. Copiez-le et collez-le simplement dans config / cloudinary.yml comme suit.

config/cloudinary.yml

development:
  cloud_name: <%= ENV['CLOUD_NAME'] %>
  api_key: <%= ENV['CLOUDINARY_API_KEY'] %>
  api_secret: <%= ENV['CLOUDINARY_API_SECRET'] %>
  enhance_image_tag: true
  static_file_support: false
production:
  cloud_name: <%= ENV['CLOUD_NAME'] %>
  api_key: <%= ENV['CLOUDINARY_API_KEY'] %>
  api_secret: <%= ENV['CLOUDINARY_API_SECRET'] %>
  enhance_image_tag: true
  static_file_support: false
test:
  cloud_name: <%= ENV['CLOUD_NAME'] %>
  api_key: <%= ENV['CLOUDINARY_API_KEY'] %>
  api_secret: <%= ENV['CLOUDINARY_API_SECRET'] %>
  enhance_image_tag: true
  static_file_support: false

4. À la fin

Je pense que vous pouvez désormais publier plusieurs images. Je suis désolé que l'explication soit minime, mais si vous le souhaitez, veuillez vous y référer! Merci d'avoir lu jusqu'au bout! !!