introduction

Lorsque l'image de l'utilisateur a été modifiée, il était difficile de dire si le fichier a été soulevé mais clairement changé, j'ai donc utilisé jQuery pour afficher un bon aperçu (je ne suis pas bon à la réception ...).

ruby 2.6.3 rails 6.0.3 Uploader ActiveStorage jQuary

Aperçu

Comportement que vous voulez faire

Avant de télécharger le fichier: prévisualiser l'affichage des images déjà liées à l'utilisateur Après le téléchargement du fichier: masquer l'affichage de l'image déjà associée à l'utilisateur, Aperçu du nouveau fichier image

Liste des fichiers d'implémentation

users ①edit.html.slim ②_form.html.slim (Seule la partie du formulaire est découpée et utilisée. Il n'y a pas de problème même si vous écrivez tout en édition.) ③javascripts/app/users/edit.js

la mise en oeuvre

`edit.html.slim`


- content_for :title
  = I18n.t 'helpers.title.edit', model: t_model(:user), name: @user.name

== render 'form', model: @user

`_form.html.slim`


= render 'shared/validation_messages', model: model
= simple_form_for model, html: { class: 'form-horizontal js-editing' } do |f|

  .page-content.container.profile_edit
    .card
      .card-header
        h5.card-title
          |Informations de base
      .card-body.p-3.ibox-content
        .no-padding.no-margins
          .circle-avatar
            img src="#" id="avatar_img_prev" class="d-none"
            - if model.image.attached?
              = image_tag(model.image, class: 'avatar_present_img')
            - else
              = image_tag("defaurt-user.png ", class: "avatar_present_img")
          |
          br
          = f.file_field :image, id: "post_img"

          = f.input :name, placeholder: 'Hanako Yamada'
　　　　　　/Ce qui suit est omis

`javascripts/app/users/edit.js`


/* global $ */

$(function() {
  function readURL(input) {
    if (input.files && input.files[0]) {
      var reader = new FileReader();

      reader.onload = function (e) {
        $('#avatar_img_prev').attr('src', e.target.result);
      };
      reader.readAsDataURL(input.files[0]);
    }
  }

  $("#post_img").change(function(){
    $('#avatar_img_prev').removeClass('d-none');
    $('.avatar_present_img').remove();
    readURL(this);
  });
}());

Je suis tombé sur le faire

・ La façon d'écrire ʻimgen notation mince n'est pas ʻimg src: "~~", id: "~~", mais ʻimg src =" ~~ "id =" ~~ "` (rarement) Je n'ai pas compris parce que je ne l'ai pas écrit ...).

・ Puisque la classe de ʻimg src = "#" id = "avatar_img_prev" class = "hidden" n'était pas bien reflétée, elle a été changée en class =" d-none "` → Cela a fonctionné.

-Depuis que jQuary a été écrit sur form.slim et n'a pas été bien reflété, il a été correctement réécrit dans le fichier js.