KindEditor-Bilder werden in die Qiniu Cloud hochgeladen

Ich habe selbst eine Website erstellt. Als Editor verwende ich normalerweise Bilder, die mit KindEditor geliefert werden. Der Server verwendet jedoch nicht viel Platz Was den Cloud-Speicherplatz betrifft, war ich verwirrt, als ich mir den Quellcode von KindEditor und Qinius SDK ansah. Als ich online suchte, blieb mir nichts anderes übrig, als den Quellcode weiter anzusehen und selbst daran arbeiten. Nachdem ich eine ganze Nacht daran gearbeitet habe, ist mir im Grunde klar geworden, wie ich es mache:

Versionshinweise:

KindEditor-Version: 4x

Qiniu SDK: 7.x.x

Backend-Skript: PHP

Werfen Sie zunächst einen Blick auf die von Qiniu bereitgestellte Formularvorlage. Hier sind die beiden Formularelemente Datei und Token erforderlich

1. Ändern Sie die Datei „plugins/image/image.js“ von KindEditor

Ändern Sie in Zeile 20 das Namensfeld der hochgeladenen Datei hier, um es mit Qiniu in Einklang zu bringen, d. h. name="file". Die kommentierte Zeile ist der Originalcode

Die zweite Änderung ist der lokale Bild-Upload-Teil. Hier ändern wir nur den lokalen Bild-Upload, die anderen sind ähnlich, einschließlich des Datei-Uploads

Ändern Sie die Aktionsadresse in den Upload-Eingang von Seven Niu: http://upload.qiniu.com/, die ursprüngliche Verarbeitungsadresse lautet /php/upload_json.php

Fügen Sie ein ausgeblendetes Formularelement hinzu:

Das Dateielement können Sie hier nicht sehen, da es separat geladen wird: „hiddenElements.join('');“ Ändern Sie dazu einfach den Namen der Datei vor

Zu diesem Zeitpunkt haben wir die grundlegenden Formularelemente zu KindEditor hinzugefügt, aber das Token hat jetzt keinen Wert. Der nächste Schritt ist die Implementierung Ajax, um das Token vom Server zu erhalten

Mein Ansatz ist: Direkt am Ende der image.js-Datei habe ich eine Funktion geschrieben, um das Token zu erhalten:

Das liegt daran, dass es sich um eine asynchrone Methode handelt, daher musste ich natürlich jQuery verwenden, um den Wert des Tokens zu ändern. Es wäre besser, natives jQuery zu verwenden, um den Wert direkt festzulegen. Es scheint, dass es nicht funktioniert Ich weiß warum. Ursprünglich funktionierte die von jQuery verwendete Methode val() nicht, daher musste ich attr()

Das Obige ist die Rückruffunktion nach dem Hochladen. Die zurückgegebenen Daten liegen im JSON-Format mit zwei Parametern vor. Natürlich wird später ein Programm zur Verarbeitung des Rückrufs hinzugefügt 🎜>

Hochladen erfolgreich:

{"error":0,"url":" https://dn-lanbaidiao.qbox.me/FryyQrpKYDDZrkJGWchh9_9og6Du" }

Upload fehlgeschlagen:

{"error":1,"message":"xxx Fehlermeldung"}

ps, diese Funktion erfordert keine Änderung, sie hängt von den persönlichen Umständen ab, hier ist nur eine Erklärung

Zu diesem Zeitpunkt hat KindEditor die Änderung abgeschlossen. Der nächste Schritt besteht darin, die PHP-Datei von Qinius zu ändern und eine callBack.php und getToken.php hinzuzufügen

2. Änderung des Backend-Codes

Laden Sie zuerst den SDK-Quellcode von Qiniu herunter. Ich verwende hier PHP: Qiniu SDK (PHP-Version)

Die Verzeichnisstruktur ist wie folgt

Ändern Sie hauptsächlich die Datei src/Qiniu/Auth.php und fügen Sie

callBack.php und getToken.php im selben Verzeichnis hinzu, also

#1 Auth.php

Die Hauptsache ist, eine Rückrufdatei hinzuzufügen, die das Upload-Ereignis selbst verarbeiten kann, nämlich callBack.php. Hierbei ist zu beachten, dass die Rückrufadresse unter demselben Domänennamen wie die liegen muss Website-Adresse, andernfalls meldet js einen domänenübergreifenden Fehler, da KindEditor Frame für das Hochladen von Bildern verwendet wird. Deshalb verwende ich nicht direkt den Rückruf von Qinius, sondern schreibe selbst einen. Ich habe hier lange überlegt, bevor ich es herausgefunden habe dass

meine eigene verwenden sollte Die Prämisse des Rückrufs besteht darin, die Rückrufadresse von Qinius zu Ihrer Rückrufadresse springen zu lassen und die Rückrufparameter an Ihr Rückrufprogramm zu übergeben. Fügen Sie also eine returnUrl hinzu

und schreiben Sie es zuerst. getToken.php generiert Ihr Qiniu-Token. Wenn Sie das Nutzungsprinzip von Qiniu nicht kennen, wird empfohlen, zuerst die offizielle Dokumentation zu lesen: Qiniu-Dokument

Dann gibt es noch callBack.php (ersetzt die Rolle des ursprünglichen kindEditors upload_json.php

). Stellen Sie die Parameter entsprechend der Situation ein Halten Sie es konsistent mit image.js

Verwenden Sie abschließend kindEditor, um den Bild-Upload zu testen. Die Adresse wurde in die Adresse von Qiniu Cloud Storage geändert, was die Reduzierung erheblich verringert der Druck auf Ihren Serververkehr und Speicherplatz

Das Obige stellt das Hochladen von KindEditor-Bildern in Qiniu Cloud vor, einschließlich der relevanten Inhalte. Ich hoffe, dass es für Freunde hilfreich ist, die sich für PHP-Tutorials interessieren.