Cum se programează cu Yii2 Încărcarea fișierelor

Dacă vă întrebați: "Ce este Yii?" verificați tutorialul meu anterior: Introducere în Cadrul Yii, care analizează beneficiile Yii și include o prezentare generală a ceea ce este nou în Yii 2.0, lansat în octombrie 2014.

În acest modul de programare cu seria Yii2, îndrumăm cititorii în folosirea cadrului Yii2 pentru PHP. În acest tutorial, vă voi îndruma prin elementele de bază ale încărcării fișierelor și imaginilor în Yii2. 

Pentru aceste exemple, vom continua să ne imaginăm că construim un cadru pentru afișarea actualizărilor de stare simple, de ex. propriul mini-Twitter. Imaginea de mai sus demonstrează scrierea unei scurte actualizări în timp ce încărcăm o fotografie pe care am luat-o de la Taj Mahal.

Doar un memento, eu particip la comentariile de mai jos. Sunt interesat în special dacă aveți abordări diferite, idei suplimentare sau doriți să sugerați subiecte pentru tutoriale viitoare. Dacă aveți o sugestie de întrebare sau subiect, vă rugăm să postați mai jos. Puteți să mă contactați și pe Twitter @reifman direct.

Pluginuri de încărcare a fișierelor

Există două pluginuri pentru încărcarea fișierelor pentru Yii2 care par a fi cele mai robuste:

1. Widgetul FileInput de către Kartik Visweswaran (prezentat mai sus)
   
2. Fișierul 2Amigos Uploader de fișiere BlueImp (un înveliș pentru încărcătorul de fișiere JQuery BlueImp) 

Pentru acest tutorial, am decis să continui cu pluginul lui Kartik. Mi sa părut mai ușor de folosit și mai bine documentat decât pluginul 2Amigos. Cu toate acestea, aplicația Uploader de fișiere BlueImp are câteva caracteristici interesante despre experiența utilizatorului, pe care ați putea dori să le explorați (prezentate mai jos):

Lucrul cu pluginul FileInput

Să începem să instalăm și să folosim fișierul de încărcare a fișierului și să îl integrăm în apletul de creare a stării de tip Twitter. Din nou, vom folosi arborele aplicației Yii2 Hello pe care îl puteți descărca cu butonul de buton GitHub de lângă sau sub.

Instalarea pluginului

În primul rând, putem folosi compozitorul pentru a adăuga Kartik-v / yii2 widget-fileinput la cererea noastră:

$ compozitorul necesită setul de caractere v / yii2-widget-fileinput "*" ./composer.json a fost actualizat Încărcarea depozitelor compozitorului cu informații despre pachete Actualizarea dependențelor (inclusiv necesitatea dev) - Actualizarea tabelului kartik-v / yii2-widget-fileinput -master 36f9f49 => v1.0.4) Check out 36f9f493c2d814529f2a195422a8af2e020fc80c Fișier de blocare de scriere Generarea fișierelor autoload 

Extinderea tabelului de stare

Apoi, trebuie să adăugăm câmpuri pentru fișierul pe care o vom încărca în tabelul nostru de stare. În acest exemplu, vom permite utilizatorului să încarce o imagine pentru a merge împreună cu actualizarea statusului.

Câmpurile pe care le vom adăuga sunt numele fișierului original al fișierelor încărcate, precum și un nume de fișier unic, care va fi stocat pe serverul nostru pentru afișare:

• image_src_filename
• image_web_filename
  

Creați o nouă migrare pentru adăugarea acestor câmpuri în tabelul Stare:

$ ./yii migrați / creați extens_status_table_for_image Instrumentul de migrare Yii (bazat pe Yii v2.0.6) Creați noua migrare '/Users/Jeff/Sites/hello/migrations/m160316_201654_extend_status_table_for_image.php'? (da | nu) [no]: da Migrația nouă a fost creată cu succes.

Iată migrarea personalizată pentru a adăuga cele două câmpuri ca șiruri de caractere:

db-> driverName === 'mysql') $ tableOptions = 'SETAREA CHARACTERULUI 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');  funcția publică jos () $ this-> dropColumn ('% status', 'image_src_filename'); $ This-> dropColumn ( 'status%' 'image_web_filename'); return false; 

Apoi, rulați migrația:

$ ./yii migrați / up Instrument de migrare Yii (bazat pe Yii v2.0.6) Se aplică o migrare totală de 1: m160316_201654_extend_status_table_for_image Aplicați migrarea de mai sus? (da: nu): da *** aplicând m160316_201654_extend_status_table_for_image> adăugați coloana image_src_filename șir NOT NULL la tabel % status ... adăugat coloană image_web_filename șir NOT NULL la tabel % starea ... făcut (timpul: 0.011s) *** aplicat m160316_201654_extend_status_table_for_image (timpul: 0.071s) Migrate cu succes.

Din moment ce Yii2 este construit cu o arhitectură Model View Controller (MVC), există trei alte zone de codificare pe care trebuie să le implementăm pentru uploaderul de fișiere:

1. Modelul de stare
2. Vizualizarea și formularul de stare
3. Controlorul de stare

Îmbunătățirea funcționalității modelului

Acum, vom face modificări la /models/Status.php fişier. Mai întâi, trebuie să furnizăm atribute și reguli de validare pentru noile câmpuri de imagine, precum și pentru cele temporare $ image variabilă pe care widgetul o va folosi pentru a încărca fișierul.

Mai jos, vom adăuga comentarii pentru cele două noi $ image_xxx_filename variabile și să creeze o variabilă temporară publică numită $ image:

/ ** * Aceasta este clasa de model pentru tabelul "status". * * @property integer $ id * @property string $ message * @property integer $ permisiuni * @property string $ image_src_filename * @property string $ image_web_filename * @property integer $ created_at * @property integer $ updated_at * @property integer $ created_by * * @property User $ createdBy * / starea clasei extinde \ yii \ db \ ActiveRecord const PERMISSIONS_PRIVATE = 10; const PERMISSIONS_PUBLIC = 20; public $ image;

Apoi, vom adăuga reguli de validare pentru imaginea noastră, cum ar fi tipul fișierului și dimensiunea maximă:

reguli de funcționare publică () return [['message'], 'required'], [['message'], 'string'], [['permissions', 'created_at', 'updated_at', 'created_by'] , '[', '' ',' '' ',' '', ' 'fișier', 'maxSize' => '100000'], [['image_src_filename', 'image_web_filename'], 'string', 'max' => 255];]; 

Noile etichete de atribute pentru vizualizări:

 funcția publică funcțiaLabels () return 'id' => Yii :: t ('app', 'ID'), 'message' => Yii :: t ('app', ' > Yii :: t ('app', 'Nume fișier'), 'image_web_filename' => Yii :: t ('app', 'Pathname' '),' created_by '=> Yii :: t (' app ',' Creat de '),' created_at '=> Yii: : t ('app', 'Actualizat la'),]; 

Acum putem trece la modificările de vizualizare din Formularul ActiveModel.

Adăugarea funcției noastre de vizualizare și formular

Integrarea încărcării imaginii în formularul de creare a stării

Pentru a permite integrarea formularului de încărcare a imaginilor în Actualizări de stare (afișate mai sus), trebuie să efectuăm modificări la /views/status/_form.php fişier. 

În primul rând, vom include Kartik \ fișier \ FileInput widget de lângă partea de sus și actualizarea formularului pentru a deveni multipart, care acceptă postarea fișierelor:

 
 [ 'Enctype' => 'multipart / form-data']]); // important?> 

Apoi, între câmpurile Permisiuni și butoanele Trimiteți, adăugăm widgetul FileInput:

câmpul (modelul $, permisiunile) -> dropDownList ($ model-> getPermissions (), ['prompt' => Yii :: t ('app', '- Choose Your Permissions'