[RUBY] [Procédure de mise en œuvre] Implémentez la fonction de téléchargement d'images avec Active Storage

Laissez la partie obstruée lors de la création de l'application pour la sortie.

Environnement de travail

· Mac ・ Rubis 2.6.5 ・ Rails 5.2.3

Qu'est-ce que le stockage actif?

Possibilité de télécharger des fichiers sur des services de stockage cloud tels qu'Amazon S3, Google Cloud Storage, Microsoft Azure Storage et d'enregistrer des fichiers sur des disques locaux. ** La caractéristique est qu'il n'est pas nécessaire de créer une colonne. ** **

Source de référence [Guide des rails](https://railsguides.jp/active_storage_overview.html#Attach fichier à enregistrer) [Rails 5.2] Comment utiliser Active Storage

Procédure de montage

1. Installation et migration

Terminal


$ rails active_storage:install
$ rails db:migrate

La saisie de la commande ci-dessus crée deux tables, ʻactive_storage_blobs et ʻactive_storage_attachments.

2. Définition de la destination de sauvegarde du fichier

Cette fois, nous allons l'implémenter en enregistrant le fichier sur le disque local.

config/storage.yml


local:
  service: Disk
  root: <%= Rails.root.join('tmp', 'storage') %>

test:
  service: Disk
  root: <%= Rails.root.join('tmp', 'storage') %>

Pour que ʻActive Storage reconnaisse le service à utiliser, définissez Rails.application.config.active_storage.service`. Étant donné que le service à utiliser peut différer en fonction de l'environnement, il est recommandé de définir ce paramètre pour chaque environnement.

Pour utiliser le service de disque local mentionné ci-dessus dans l'environnement de développement, ajoutez ce qui suit à config / environnements / development.rb.

config/environments/developments.rb


  # Storage
  config.active_storage.service = :local

Si vous souhaitez télécharger une image

3. paramètres du modèle

Supposons que vous souhaitiez télécharger une image sur le modèle de site. → Ajoutez has_one_attached au modèle. Selon le guide Rails

Configurez un mappage un à un entre les enregistrements et les fichiers. Vous pouvez joindre un fichier à chaque enregistrement.

app/models/site.rb


class Site < ApplicationRecord
  has_one_attached :image
end

4. Paramètres du contrôleur

app/controllers/admin/sites_controller.rb


class Admin::SitesController < ApplicationController
  def update
    @site = Site.find(current_site.id)

    if @site.update(site_params)
      redirect_to edit_admin_site_path
    else
      render :edit
    end
  end

  private

  def site_params
    #A dans le modèle_one_J'ajouterai l'ensemble d'images en pièce jointe
    params.require(:site).permit(:name, :image)
  end
end

5. afficher les paramètres

ruby:app/views/admin/sites/edit.html.slim


 = f.input :image, as: :file

ruby:show.html.slim


 = image_tag @site.image

Si vous souhaitez télécharger plusieurs images

3. paramètres du modèle

Supposons que vous souhaitiez télécharger plusieurs images sur le modèle de site. → Ajoutez has_many_attached au modèle. Selon le guide Rails

Établissez une relation un-à-plusieurs entre les enregistrements et les fichiers. Vous pouvez joindre un grand nombre de pièces jointes à chaque enregistrement.

app/models/site.rb


class Site < ApplicationRecord
  has_many_attached :images
end

4. Paramètres du contrôleur

app/controllers/admin/sites_controller.rb


class Admin::SitesController < ApplicationController
  def update
    @site = Site.find(current_site.id)

    if @site.update(site_params)
      redirect_to edit_admin_site_path
    else
      render :edit
    end
  end

  private

  def site_params
    #A dans le modèle_one_Je vais ajouter les images définies en pièce jointe. Permet de stocker le tableau.
    params.require(:site).permit(:name, images: [])
  end
end

5. afficher les paramètres

ruby:app/views/admin/sites/edit.html.slim


 # multiple:Plusieurs téléchargements sont possibles en ajoutant true.
 = f.input :images, as: :file, input_html: { multiple: true }

ruby:show.html.slim


 - @site.images.each do |image|
   = image_tag image

fin

Ceci est le premier message Qiita de ma vie. Il peut y avoir des parties nécessaires telles que des ajouts et des corrections. Dans ce cas, nous apprécierions vos conseils.

Recommended Posts

[Procédure de mise en œuvre] Implémentez la fonction de téléchargement d'images avec Active Storage
Implémentation de la fonction de prévisualisation d'image
Implémentation de la fonction de prévisualisation d'image
[Rails] Implémenter la fonction de publication d'images
[Rails] Implémentation de la fonction de prévisualisation d'image
J'ai essayé d'implémenter la fonction de prévisualisation d'image avec Rails / jQuery
[Rails] Commentaire mémo de procédure d'implémentation
Essayez d'implémenter une fonction de connexion avec Spring-Boot
Échafaudage de procédure d'implémentation de fonction CRUD de base
Comment implémenter TextInputLayout avec la fonction de validation
Implémenter la fonction de pagination avec Spring Boot + Thymeleaf
Implémenter l'entrée / sortie d'image avec Spring MVC
Publier / supprimer plusieurs images avec Active Storage
Résumé de l'apprentissage d'aujourd'hui: avec la mise en œuvre de la fonction de gestion des utilisateurs
[Rails] Implémentation de la fonction d'agrandissement d'image à l'aide de lightbox2
Essayez d'implémenter la fonction de connexion avec Spring Boot
Flux pour implémenter la fonction de publication d'images à l'aide d'ActiveStorage
[JQuery] Procédure d'implémentation de la fonction de saisie semi-automatique [Java / Spring]
Mettre en œuvre la fonction de recherche avec l'API Rakuten Books (DVD)