[JAVA] [Ruby on Rails] Post-Bildvorschau-Funktion in Refile

Ziel

img_prev.gif

Entwicklungsumgebung

ruby 2.5.7 Rails 5.2.4.3 OS: macOS Catalina

Annahme

Wir gehen davon aus, dass die Buchungsfunktion bereits erstellt wurde.

fließen

1 Einführung von Gem Refile Fügen Sie 2 Spalten hinzu 3 Modell bearbeiten 4 Controller bearbeiten 5 Ansicht bearbeiten

Einführung von Gem Refile

Gemfile


gem 'refile', require: 'refile/rails', github: 'refile/refile'
Supplement Refile ist ein Juwel, mit dem Sie Dateien hochladen können.

Terminal


$ bundle install

Spalte hinzufügen

Terminal


$ rails g migration AddPostImageIdToPosts post_image_id:string

Terminal


$ rails db:migrate

Es ist in Ordnung, wenn t.string "post_image_id" hinzugefügt wird.

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 damit
    t.index ["user_id"], name: "index_posts_on_user_id"
  end

Modell bearbeiten

app/models/post.rb


attachment :post_image
Ergänzung [Regeln für die Verwendung von refile] 1 Der Bild-Upload wird mit <% = f.attachment_field: image%> implementiert 2 Fügen Sie dem Modell die Bild-Upload-Methode "Anhang" hinzu und geben Sie das Bild an. * Da diesmal post_image_id hinzugefügt wurde, geben Sie post_image an.

Controller bearbeiten

Sie können das post_image auch ändern, indem Sie Folgendes hinzufügen.

app/controllers/posts_controller.rb


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

Ansicht bearbeiten

Dieses Mal, um zuerst das Standardbild anzuzeigen, Ich habe im Voraus eine Bilddatei namens no-image.png vorbereitet. Der Speicherort befindet sich in 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>
Ergänzung [Anhang_Bildtag] Erstellen Sie ein img-Tag mit der von refile bereitgestellten Hilfsmethode.
Ergänzung [Fallback] Geben Sie das Bild an, das angezeigt werden soll, wenn ein Fehler auftritt.
Ergänzung [turbolinks: load] Stellen Sie ein, dass beim ersten Laden, erneuten Laden und Seitenwechsel gearbeitet werden soll.
Ergänzung [Informationen zum Javascript-Vorgang] Manipulieren Sie das Attribut von id = img_prev, Ändern Sie die Lade-URL von post_img des Postmodells mit der Änderungsmethode
Supplement [Wenn ein Laufzeitfehler angezeigt wird] Auf dem Code des Fehlerbildschirms

Refile.secret_key = ...


 Wird angezeigt.
 Kopieren Sie die Zeile mit Refile.secret_key = und
 In config / initializers / application_controller_renderer.rb
 Sie können den Fehler beseitigen, indem Sie ihn unten hinzufügen.
</details>

Recommended Posts