Programmieren mit Yii2 Hochladen von Dateien

Wenn Sie fragen: "Was ist Yii?" Schauen Sie sich mein früheres Tutorial an: Einführung in das Yii-Framework, Hier werden die Vorteile von Yii beschrieben und ein Überblick über die Neuerungen in Yii 2.0 (Oktober 2014) gegeben.

In dieser Anleitung zum Programmieren mit Yii2 leite ich die Leser beim Einsatz des Yii2-Frameworks für PHP. In diesem Tutorial werde ich Sie durch die Grundlagen des Hochladens von Dateien und Bildern in Yii2 führen. 

Für diese Beispiele stellen wir uns weiterhin vor, dass wir ein Framework für die Veröffentlichung einfacher Statusaktualisierungen erstellen, z. unser eigenes Mini-Twitter. Das Bild oben zeigt das Schreiben eines kurzen Updates, während ich ein Foto des Taj Mahal hochlade.

Nur zur Erinnerung, ich beteilige mich an den Kommentarthreads unten. Ich bin besonders interessiert, wenn Sie unterschiedliche Ansätze, zusätzliche Ideen haben oder Themen für zukünftige Tutorials vorschlagen möchten. Wenn Sie eine Frage oder ein Thema haben, schreiben Sie bitte unten. Sie können mich auch direkt auf Twitter @reifman erreichen.

Plugins zum Hochladen von Dateien

Es gibt zwei Plugins für das Hochladen von Dateien für Yii2, die am robustesten erscheinen:

1. Das FileInput-Widget von Kartik Visweswaran (oben abgebildet)
   
2. Der 2Amigos BlueImp File Uploader (ein Wrapper für den BlueImp JQuery File Uploader) 

Für dieses Tutorial habe ich mich entschieden, mit Kartiks Plugin fortzufahren. Ich fand es einfacher zu bedienen und besser dokumentiert als das 2Amigos-Plugin. Der BlueImp File Uploader verfügt jedoch über einige faszinierende Benutzererfahrungsfunktionen, die Sie erkunden möchten (siehe unten):

Arbeiten mit dem FileInput-Plugin

Beginnen Sie mit der Installation und Verwendung des Datei-Uploaders und integrieren Sie ihn in unser Twitter-ähnliches Statuserstellungs-Applet. Wir verwenden wieder den Yii2 Hello-Anwendungsbaum, den Sie mit dem GitHub-Button-Link neben oder unterhalb herunterladen können.

Plugin installieren

Zuerst können wir Composer zum Hinzufügen verwenden kartik-v / yii2-widget-fileinput zu unserer Bewerbung:

$ composer erfordern kartik-v / yii2-widget-fileinput "*" ./composer.json wurde aktualisiert. Composer-Repositorys mit Paketinformationen werden geladen. Abhängigkeiten werden aktualisiert (einschließlich required-dev) - kartik-v / yii2-widget-fileinput (dev -master 36f9f49 => v1.0.4) Auschecken 36f9f493c2d814529f2a195422a8af2e020fc80c Sperrdatei schreiben Dateien werden automatisch generiert 

Erweitern der Statustabelle

Als Nächstes müssen wir Felder für die Datei hinzufügen, die wir in unsere Statustabelle hochladen möchten. In diesem Beispiel lassen wir den Benutzer ein Bild hochladen, um dessen Statusaktualisierung mitzunehmen.

Die Felder, die wir hinzufügen, betreffen den ursprünglichen Dateinamen der hochgeladenen Dateien sowie einen eindeutigen Dateinamen, der zur Anzeige auf unserem Server gespeichert wird:

• image_src_filename
• image_web_filename
  

Erstellen Sie eine neue Migration, um diese Felder zur Statustabelle hinzuzufügen:

$ ./yii migrieren / erstellen extend_status_table_for_image Yii Migration Tool (basierend auf Yii v2.0.6) Neue Migration erstellen '/Users/Jeff/Sites/hello/migrations/m160316_201654_extend_status_table_for_image.php'? (ja | nein) [nein]: ja Die neue Migration wurde erfolgreich erstellt.

Hier ist die angepasste Migration, um die beiden Felder als Zeichenfolgen hinzuzufügen:

db-> driverName === 'mysql') $ tableOptions = 'CHARACTER SET utf8 COLLATE utf8_unicode_ci ENGINE = InnoDB';  $ this-> addColumn ('% status', 'image_src_filename', Schema :: TYPE_STRING. 'NOT NULL'); $ this-> addColumn ('% status', 'image_web_filename', Schema :: TYPE_STRING. 'NOT NULL');  public function down () $ this-> dropColumn ('% status', 'image_src_filename'); $ this-> dropColumn ('% status', 'image_web_filename'); falsch zurückgeben; 

Führen Sie dann die Migration aus:

$ ./yii migrate / up Yii Migration Tool (basierend auf Yii v2.0.6) Insgesamt 1 neu anzuwendende Migration: m160316_201654_extend_status_table_for_image Anwenden der obigen Migration? (Ja | Nein) [Nein]: Ja *** Anwenden von m160316_201654_extend_status_table_for_image> Hinzufügen der Spalte image_src_filename string NOT NULL zur Tabelle % status… done (time: 0.044s)> Hinzufügen der Spalte image_web_filename string NOT NULL zur Tabelle % status ... done (Zeit: 0.011s) *** angewendet m160316_201654_extend_status_table_for_image (Zeit: 0,071s) Erfolgreich migriert.

Da Yii2 mit einer Model View Controller (MVC) -Architektur aufgebaut ist, gibt es drei weitere Codierungsbereiche, die für den Dateiuploader implementiert werden müssen:

1. Das Statusmodell
2. Die Statusansicht und das Formular
3. Der Statuscontroller

Verbesserung der Modellfunktionalität

Jetzt nehmen wir Änderungen am vor /models/Status.php Datei. In erster Linie müssen Attribute und Validierungsregeln für die neuen Bildfelder sowie für die temporären Felder bereitgestellt werden $ image Variable, die das Widget zum Hochladen der Datei verwendet.

Unten fügen wir Kommentare für die beiden neuen hinzu $ image_xxx_filename Variablen und erstellen Sie eine öffentliche temporäre Variable namens $ image:

/ ** * Dies ist die Modellklasse für die Tabelle "Status". * * @property integer $ id * @property string $ message * @property integer $ Berechtigungen * @property string $ image_src_filename * @ property string $ image_web_filename * @ property integer $ created_at * @ property integer $ updated_at * @property integer $ erstellt_by * * @ property User $ createdBy * / class Status erweitert \ yii \ db \ ActiveRecord const PERMISSIONS_PRIVATE = 10; const PERMISSIONS_PUBLIC = 20; öffentliches $ image;

Als Nächstes fügen wir Validierungsregeln für unser Image hinzu, z. B. Dateityp und maximale Größe:

public function rules () return [[['message'], 'required'], [['' message '],' string '], [[' 'permissions' ',' created_at ',' updated_at ',' created_by ']) , 'integer'], [['' image '],' safe '], [[' 'image'], 'file', 'extensions' => 'jpg, gif, png'], [['' image '], 'file', 'maxSize' => '100000'], [['' image_src_filename ',' image_web_filename '],' string ',' max '=> 255],]; 

Und neue Attributbeschriftungen für Ansichten:

 public function attributeLabels () return ['id' => Yii :: t ('app', 'ID'), 'message' => Yii :: t ('app', 'Message'), 'permissions' = > Yii :: t ('app', 'Permissions'), 'image_src_filename' => Yii :: t ('app', 'Dateiname'), 'image_web_filename' => Yii :: t ('app', 'Pfadname '),' created_by '=> Yii :: t (' app ',' Created By '),' created_at '=> Yii :: t (' app ',' Created at '),' updated_at '=> Yii: : t ('app', 'Updated At'),]; 

Jetzt können wir mit den Änderungen der Ansicht im ActiveModel-Formular fortfahren.

Hinzufügen unserer Ansichts- und Formularfunktionalität

Image-Upload in das Statuserstellungsformular integrieren

Um die Formularintegration für das Hochladen von Bildern in Statusaktualisierungen (oben dargestellt) zu ermöglichen, müssen Sie Änderungen an der /views/status/_form.php Datei. 

Zuerst schließen wir das ein kartik \ file \ FileInput Widget oben und aktualisieren Sie das Formular, um mehrteilig zu werden, was die Veröffentlichung von Dateien unterstützt:

 
 ['enctype' => 'multipart / form-data']])); // wichtig?> 

Dann fügen Sie zwischen den Feldern Berechtigungen und Senden das FileInput-Widget hinzu:

Feld ($ model, 'permissions') -> dropDownList ($ model-> getPermissions (), ['prompt' => Yii :: t ('app', '- Wählen Sie Ihre Berechtigungen -')])?>