[RUBY] J'ai essayé d'implémenter la fonction de téléchargement d'images multiples dans Rails afin que plusieurs images puissent être glissées pour le message

1. Implémentation de la fonction de téléchargement d'images multiples

Je l'ai implémenté afin de pouvoir télécharger plusieurs images à l'aide de carrierwave.

Qu'est-ce que Carrierwave?

carrierwave est une bibliothèque qui vous permet d'implémenter facilement la fonction de téléchargement d'images depuis votre application Rails. Cette fois, j'ai utilisé carrierwave ver2.1.0.

Comment l'avez-vous utilisé?

Tout d'abord, installez le Gem ci-dessous.

Mon application / Gemfile

gem 'carrierwave'
gem 'mini_magick'

Générez un uploader.

rails g upload image

Cela générera le fichier suivant: Si vous souhaitez personnaliser dans ce fichier, ajoutez un traitement.

app/upload/image_upload.rb

Donc, j'ai fait les réglages comme ci-dessous.

Mon application /app/upload/image_upload.rb

class ImageUploader < CarrierWave::Uploader::Base

    include CarrierWave::MiniMagick

    process resize_to_fill: [1000, 1000]

    version :thumb do
        process resize_to_fit: [223,223]
    end

    version :swiper do
        process resize_to_fit: [400, 400]
    end
    
    version :thumbnil do
        process resize_to_fit: [100, 100]
    end
    
    storage :file
    
    def store_dir
        "uploads/#{model.class.to_s.underscore}/#{mounted_as}/#{model.id}"
    end
    
     def extension_whitelist
        %w(jpg jpeg gif png)
     end
     
 end

Comment avez-vous ajouté les paramètres?

include CarrierWave::MiniMagick

Je voulais redimensionner l'image lors du téléchargement, j'ai donc installé minimagick. Puisqu'il est décrit comme un commentaire quand image_upload.rb est généré, supprimez # et décrivez-le comme un code de traitement. minimagick est une interface Ruby pour imagemagick, un programme C. Cela vous permet d'utiliser la méthode de redimensionnement d'image.

Une fois téléchargé, le processus ci-dessous coupe à 1000x1000px, puis une version appelée thumb est créée et mise à l'échelle à 223x223px. De même, des versions appelées balayeuse et vignette sont créées et mises à l'échelle pour chaque version.

• Cependant, il n'est pas souhaitable d'augmenter trop la version en fonction du développement de l'équipe.

  process resize_to_fill: [1000, 1000]

  version :thumb do process resize_to_fit: [223,223] end

  version :swiper do process resize_to_fit: [400, 400] end

  version :thumbnil do process resize_to_fit: [100, 100] end

C'est là que les images sont enregistrées lorsqu'elles sont téléchargées. La valeur par défaut est répertoriée. Il est placé comme "public / uploads / nom de modèle spécifié / nom de colonne de modèle spécifié / ID de modèle / image et image créées dans chaque version". Si vous le modifiez, vous pouvez l'écraser.

def store_dir
    "uploads/#{model.class.to_s.underscore}/#{mounted_as}/#{model.id}"
end

Ceci est également décrit comme un commentaire par défaut, il est donc décrit pour pouvoir être traité. Vous pouvez spécifier une liste blanche d'extensions autorisées. Le téléchargement d'extensions autres que jpg, jpeg, gif et png invalidera l'enregistrement.

def extension_whitelist
    %w(jpg jpeg gif png)
end

C'est la fin de l'explication des paramètres, puis la table de publication parente et la table d'image enfant sont créées. Le tableau est divisé en article et image afin de prendre en charge plusieurs articles.

$rails g model Post content:text 

$rails g model Image url:string post:reference

Ce que je suis tombé sur ici, c'est que dans mon cas, j'ai manipulé le type json lors de la création du modèle d'image. À l'origine, je voulais créer une spécification qui autorise plusieurs publications en créant une colonne d'image dans la table de publication, mais depuis que je l'ai modifiée pour créer une nouvelle table d'image et la sauvegarder, j'ai dit plus tard que je n'avais pas à me soucier d'en faire un type json. J'ai remarqué. Ainsi, si vous souhaitez gérer plusieurs images dans une table ici, vous pouvez utiliser le type json et le concevoir de manière à pouvoir gérer plusieurs images dans un enregistrement d'objet. Dans mon cas, j'ai créé une autre table et je l'ai laissée en tant que type json, mais il est recommandé de la créer en tant que type de chaîne à moins qu'il n'y ait une raison spécifique.

Créez un fichier de migration et mettez à jour la base de données.

$rails db:migrate

Ajoutez la description suivante au fichier de modèle.

Mon application /app/model/image.rb

class Image < ApplicationRecord
    belongs_to :post

mount_uploader: url, ImageUploader # Montez la fonction de téléchargement sur les données que vous souhaitez utiliser. end

Mon application /app/mode/post.rb

class Post < ApplicationRecord
    validates :content, presence: true, length: { maximum: 1000 }
    has_many :images, dependent: :destroy

Si vous postez accepte_nested_attributes_for: images #post, vous pourrez publier des images en même temps. end

Il convient de noter ici que lors de l'utilisation d'accept_nested_attributes_for, la colonne images_attributes doit être ajoutée au paramètre strong. Ce sera comme suit.

Mon application /app/controller/post_controller.rb

  def new
    @post = Post.new
    @image = @post.images.build
  end
  
  def create
    @post = current_user.posts.new(post_params)
    if @post.save

redirect_to posts_path, succès: "publié" else flash [: danger] = "La publication a échoué" render :new end end

  private
  
  def post_params
    params.require(:post).permit(:content, images_attributes: [:url])
  end

Vous avez maintenant configuré pour transmettre plusieurs images en tant que paramètres. Ensuite, réfléchissons à la façon d'autoriser la publication de plusieurs images dans la vue. Ici, j'étais accro à diverses choses. Dans la méthode fields_for, il est dit que plusieurs messages peuvent être publiés en décrivant multiple: true dans le deuxième argument, mais cela ne fonctionne pas,. Donc, comme autre méthode, je l'ai implémentée afin que plusieurs publications puissent être faites avec javascript. Cet article a été très bien écrit, je l'ai donc utilisé comme référence. → Qiita Si vous définissez conformément à cet article, javascript démarrera et le programme devrait s'exécuter à chaque téléchargement.

2. Mis en œuvre pour que plusieurs images puissent être glissées pour un message avec swipper

Qu'est-ce que Swiper?

En gros, c'est un cadre qui facilite la mise en œuvre de la fonction de diapositive.

Comment l'avez-vous utilisé?

Tout d'abord, configurez la balayeuse à utiliser dans l'application. Il existe plusieurs méthodes, mais je l'ai introduite en utilisant du fil. La méthode d'introduction et le contenu de cet article en fil étaient très faciles à comprendre, je l'ai donc utilisé comme référence. →Qiita

Introduisez le swiper avec du fil.

$yarn add swiper

$yarn install

Vérifiez package.json pour voir s'il a été installé. Si vous n'avez pas installé yarn, installez yarn avec la commande suivante. (Si vous utilisez mac)

$brew installl yarn

Après l'installation, décrivez comme suit dans application.js et application.scss.

Mon application /app/assets/stylesheets/application.scss

@import "swiper/swiper-bundle";

Mon application /app/assets/javascript/application.js

 //= require swiper/swiper-bundle.js
 //= swiper.js

Créez un fichier swiper.js et écrivez comme suit. Avec swiper, vous devez écrire et créer le type de méthode de diapositive que vous souhaitez ajouter avec swiper. Choisissez votre méthode de diapositive préférée dans la démo de swiper et copiez le code js dans le script ci-dessous! -Initialiser Swiper-à partir du code source. Vous n'avez pas besoin d'inclure la balise de script. Dans mon cas, j'ai fait une diapositive avec pagination / puces dynamiques, donc cela ressemble à ce qui suit. Ce nom de fichier js n'a pas besoin d'être swipe.js. Si vous souhaitez modifier le nom de fichier, modifiez également le nom de fichier décrit dans application.js. Démo

Mon application /app/assets/javascript/swiper.js

var swiper = new Swiper(".swiper-container", {
pagination: {
    el: ".swiper-pagination",
    dynamicBullets: true,
    },
});

Maintenant que nous sommes prêts, mettons-le en œuvre en vue. Puisqu'il s'agit d'un exemple d'implémentation avec pagination / puce dynamique, si vous choisissez une autre méthode de diapositive, veuillez vérifier le code source.

Mon application /app/views/posts/index.html.slim

 .swiper-container.top-carousel
    .swiper-wrapper(style="transform: translate3d(0px, 0px, 0px)")
         - @post.images.each do |img|
            .swiper-slide(style="width: 400px;")
                = link_to post do
                = image_tag img.swiper.url, class: "card-img-top"
     .swiper-pagination

~ Omis ~

= javascript_include_tag "application"  

L'important ici est d'écrire = javascript_include_tag "application" à la toute fin. Si vous oubliez d'écrire ceci, la balayeuse ne démarrera pas. Vous pouvez l'écrire dans application.html.slim, mais je ne l'écris que dans la partie de la page qui nécessite une balayeuse. En outre, ce img.url.swiper.url appelle la version balayeuse de l'image créée par carrierwave.

Vous avez maintenant implémenté le balayage dans votre cas.