[RUBY] [Implementierungsverfahren] Implementieren Sie die Funktion zum Hochladen von Bildern mit Active Storage

Lassen Sie den Teil, der beim Erstellen der Anwendung für die Ausgabe verstopft war.

Arbeitsumgebung

· Mac ・ Ruby 2.6.5 ・ Schienen 5.2.3

Was ist aktiver Speicher?

Möglichkeit zum Hochladen von Dateien in Cloud-Speicherdienste wie Amazon S3, Google Cloud Storage und Microsoft Azure Storage sowie zum Speichern von Dateien auf lokalen Festplatten. ** Die Funktion besteht darin, dass keine Spalte erstellt werden muss. ** **.

Referenzquelle [Rails Guide](https://railsguides.jp/active_storage_overview.html#Attach Datei zum Aufzeichnen) [Rails 5.2] Verwendung von Active Storage

Montagevorgang

1. Installation und Migration

Terminal


$ rails active_storage:install
$ rails db:migrate

Durch Eingabe des obigen Befehls werden zwei Tabellen erstellt, "active_storage_blobs" und "active_storage_attachments".

2. Festlegen des Speicherziels der Datei

Dieses Mal implementieren wir es, indem wir die Datei auf der lokalen Festplatte speichern.

config/storage.yml


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

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

Um "Active Storage" den zu verwendenden Dienst erkennen zu lassen, setzen Sie "Rails.application.config.active_storage.service". Da der zu verwendende Dienst je nach Umgebung unterschiedlich sein kann, wird empfohlen, diese Einstellung für jede Umgebung vorzunehmen.

Um den oben genannten lokalen Festplattendienst in der Entwicklungsumgebung zu verwenden, fügen Sie Folgendes zu "config / environment / development.rb" hinzu.

config/environments/developments.rb


  # Storage
  config.active_storage.service = :local

Wenn Sie ein Bild hochladen möchten

3. Modelleinstellungen

Angenommen, Sie möchten ein Bild in das "Site-Modell" hochladen. → Fügen Sie dem Modell has_one_attached hinzu. Laut Rails Guide

Richten Sie eine Eins-zu-Eins-Zuordnung zwischen Datensätzen und Dateien ein. Sie können jedem Datensatz eine Datei hinzufügen.

app/models/site.rb


class Site < ApplicationRecord
  has_one_attached :image
end

4. Controller-Einstellungen

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
    #Hat im Modell_one_Ich werde den Bildsatz anhängen
    params.require(:site).permit(:name, :image)
  end
end

5. Einstellungen anzeigen

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


 = f.input :image, as: :file

ruby:show.html.slim


 = image_tag @site.image

Wenn Sie mehrere Bilder hochladen möchten

3. Modelleinstellungen

Angenommen, Sie möchten mehrere Bilder in das "Site-Modell" hochladen. → Fügen Sie dem Modell has_many_attached hinzu. Laut Rails Guide

Richten Sie eine Eins-zu-Viele-Beziehung zwischen Datensätzen und Dateien ein. Sie können jedem Datensatz eine große Anzahl von Anhängen hinzufügen.

app/models/site.rb


class Site < ApplicationRecord
  has_many_attached :images
end

4. Controller-Einstellungen

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
    #Hat im Modell_one_Ich werde die angehängten Bilder hinzufügen. Ermöglicht das Speichern des Arrays.
    params.require(:site).permit(:name, images: [])
  end
end

5. Einstellungen anzeigen

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


 # multiple:Mehrere Uploads sind durch Hinzufügen von true möglich.
 = f.input :images, as: :file, input_html: { multiple: true }

ruby:show.html.slim


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

Ende

Dies ist der erste Qiita-Beitrag in meinem Leben. Möglicherweise sind Teile wie Ergänzungen und Korrekturen erforderlich. In diesem Fall würden wir uns über Ihre Anleitung freuen.

Recommended Posts

[Implementierungsverfahren] Implementieren Sie die Funktion zum Hochladen von Bildern mit Active Storage
Implementierung der Bildvorschau-Funktion
Implementierung der Bildvorschau
[Rails] Implementieren Sie die Image-Posting-Funktion
[Rails] Implementierung der Bildvorschau
Ich habe versucht, die Bildvorschau mit Rails / jQuery zu implementieren
[Rails] Memo zur Implementierung der Kommentarfunktion
Versuchen Sie, eine Anmeldefunktion mit Spring-Boot zu implementieren
Rails Grundgerüst für die Implementierung der CRUD-Funktion
So implementieren Sie TextInputLayout mit Validierungsfunktion
Implementieren Sie die Paging-Funktion mit Spring Boot + Thymeleaf
Implementieren Sie die Bildeingabe / -ausgabe mit Spring MVC
Veröffentlichen / Löschen mehrerer Bilder mit Active Storage
Die heutige Lernzusammenfassung: Mit Implementierung der Benutzerverwaltungsfunktion
[Rails] Implementierung der Bildvergrößerungsfunktion mit Lightbox2
Versuchen Sie, die Anmeldefunktion mit Spring Boot zu implementieren
Ablauf zur Implementierung der Image-Posting-Funktion mit ActiveStorage
[JQuery] Implementierungsverfahren der AutoComplete-Funktion [Java / Spring]
Implementieren Sie die Suchfunktion mit der Rakuten Books (DVD) API