[JAVA] [Ruby on Rails] Fonction de prévisualisation de l'image dans le fichier

Cible

img_prev.gif

Environnement de développement

ruby 2.5.7 Rails 5.2.4.3 OS: macOS Catalina

supposition

Nous supposerons que la fonction de publication a déjà été créée.

couler

1 Introduction du refile de gemmes Ajouter 2 colonnes 3 Modifier le modèle 4 Modifier le contrôleur 5 Modifier la vue

Introduction du refile de gemmes

Gemfile


gem 'refile', require: 'refile/rails', github: 'refile/refile'

<détails>

Supplément </ summary> refile est un joyau qui vous permet de télécharger des fichiers. </ détails>

Terminal


$ bundle install

Ajouter une colonne

Terminal


$ rails g migration AddPostImageIdToPosts post_image_id:string

Terminal


$ rails db:migrate

C'est OK si t.string "post_image_id" est ajouté.

db/schema


  create_table "posts", force: :cascade do |t|
    t.integer "user_id"
    t.string "title"
    t.string "body"
    t.datetime "created_at", null: false
    t.datetime "updated_at", null: false
    t.string "post_image_id" # <--OK avec ça
    t.index ["user_id"], name: "index_posts_on_user_id"
  end

Modifier le modèle

app/models/post.rb


attachment :post_image
Supplément [Règles d'utilisation du refile] 1 Le téléchargement d'image est implémenté avec <% = f.attachment_field: image%> 2 Ajoutez la méthode de téléchargement d'image «pièce jointe» au modèle et spécifiez l'image. * Puisque post_image_id a été ajouté cette fois, spécifiez post_image.

Contrôleur d'édition

Vous pouvez également modifier post_image en ajoutant ce qui suit.

app/controllers/posts_controller.rb


  def post_params
    params.require(:post).permit(:title, :body, :post_image)
  end

Modifier vue

Cette fois, pour afficher d'abord l'image par défaut, J'ai préparé à l'avance un fichier image appelé no-image.png. L'emplacement d'enregistrement sera dans app / assets / images.

erb:app/views/posts/new.html.erb



<% form_with,...%>
...

  <div>
    <%= attachment_image_tag @post, :post_image, fallback: "no-image.png ", id: "img_prev", style: "height: 250px; width:300px;" %><br>
    <%= f.attachment_field :post_image %>
  </div>

...

<% end %>

...

<script>
$(document).on("turbolinks:load", function(){
  function readURL(input) {
    if(input.files && input.files[0]){
      var reader = new FileReader();
      reader.onload = function (e) {
        $('#img_prev').attr('src', e.target.result);
      }
      reader.readAsDataURL(input.files[0]);
    }
  }
  $("#post_post_image").change(function(){
    readURL(this);
  });
});
</script>
Supplément [attachment_image_tag] Créez une balise img avec la méthode d'assistance fournie par refile.
Supplément [fallback] Spécifiez l'image à afficher en cas de problème.
Supplément [turbolinks: load] Configuré pour fonctionner avec le premier chargement, le rechargement et le changement de page.
Supplément [À propos de l'opération Javascript] Manipulez l'attribut de id = img_prev, Changer l'URL de chargement de post_img du post-modèle avec la méthode de changement
Supplément [Lorsque l'erreur d'exécution est affichée] Sur le code de l'écran d'erreur

Refile.secret_key = ...


 Est affiché.
 Copiez la ligne contenant ce Refile.secret_key = et
 Dans config / initializers / application_controller_renderer.rb
 Vous pouvez éliminer l'erreur en l'ajoutant en bas.
</details>

Recommended Posts