Wie lade ich Bilder in den Rich-Text-Editor in ThinkPHP6 hoch?

ThinkPHP6 bietet als hervorragendes PHP-Framework eine Fülle von Betriebsbibliotheken und Tools, die es Entwicklern ermöglichen, funktionale Anforderungen schneller umzusetzen. In der Webentwicklung werden Rich-Text-Editoren häufig als eines der notwendigen Tools verwendet, um Benutzern die bequeme Bearbeitung von Inhalten zu erleichtern. Wenn Benutzer jedoch Bilder einfügen möchten, müssen sie über die Funktion zum Hochladen von Bildern verfügen.

In diesem Artikel wird UMEditor als Beispiel verwendet, um vorzustellen, wie die Bild-Upload-Funktion des Rich-Text-Editors in ThinkPHP6 implementiert wird.

Schritt eins: UMEditor vorstellen

Legen Sie die Ressourcendateien von UMEditor (einschließlich JS, CSS, Bilder usw.) in das öffentliche Verzeichnis unter dem Projektverzeichnis und führen Sie dann die relevanten Ressourcendateien von UMEditor in die HTML-Seite ein. Ein Beispiel ist wie folgt:

<!-- 引入UMEditor -->
<link href="/public/UMEditor/themes/default/css/umeditor.css" rel="stylesheet">
<script src="/public/UMEditor/umeditor.config.js"></script>
<script src="/public/UMEditor/umeditor.min.js"></script>

Schritt 2: Schreiben Sie die Bild-Upload-Schnittstelle

In ThinkPHP6 kann das Schreiben der Schnittstelle über die Route-Klasse und die Controller-Klasse erreicht werden.

1. Erstellen Sie eine upload.php-Datei im Routenverzeichnis mit dem folgenden Code:

<?php
use thinkacadeRoute;

Route::post('upload/image', 'api/Upload/uploadImage');

Die von dieser Route zugeordnete Controller-Methode ist die uploadImage-Methode des Upload-Controllers.

2. Erstellen Sie ein API-Verzeichnis im App-Verzeichnis und erstellen Sie dann einen Upload-Controller und einen UploadService-Dienst im API-Verzeichnis. Der Code lautet wie folgt:

Upload-Controller:

<?php
namespace apppicontroller;

use apppiserviceUploadService;
use thinkacadeRequest;

class Upload
{
    public function uploadImage()
    {
        $file = Request::file('upfile');
        $uploadService = new UploadService();
        $result = $uploadService->uploadImage($file);
        return json($result);
    }
}

UploadService-Dienst:

<?php
namespace apppiservice;

use thinkacadeFilesystem;
use thinkacadeConfig;

class UploadService
{
    public function uploadImage($file)
    {
        $storage = Config::get('filesystem.default');
        $savename = Filesystem::disk($storage)->putFile('images', $file);
        $url = Config::get("filesystem.disks.{$storage}.url") . '/' . str_replace('\', '/', $savename);
        return [
            'state' => 'SUCCESS',
            'url' => $url,
            'title' => '',
            'original' => $file->getOriginalName(),
            'type' => $file->getOriginalExtension(),
            'size' => $file->getSize(),
        ];
    }
}

In UploadService , Wir verwenden die von ThinkPHP6 bereitgestellte Dateispeicherfunktion, um den Zweck des Bild-Uploads zu erreichen. Die spezifische Implementierung verwendet die Filesystem-Klasse und die Config-Klasse. In der Konfigurationsdatei config/filesystem.php müssen die entsprechende Speichermethode und der entsprechende Pfad konfiguriert werden.

Schritt 3: UMEditor konfigurieren

1. Instanziieren Sie UMEditor auf der HTML-Seite und konfigurieren Sie die Bild-Upload-Schnittstelle:

<script type="text/javascript">
    var um = UM.getEditor('myEditor', {
        imageUrl: '/upload/image',  //图片上传接口
        imageFieldName: 'upfile',   //图片提交的表单名称
        imageMaxSize: 2048000,      //图片大小限制，单位是字节
        imageAllowFiles: ['.jpg', '.png', '.gif', '.jpeg'],  //允许上传的图片类型
    });
</script>

2. Konfigurieren Sie den Datei-Upload-Pfad von UMEditor:

<script type="text/javascript">
    UMEDITOR_CONFIG.serverUrl = '/public/UMEditor/php/controller.php/?action=';
</script>

In controller.php müssen Sie Folgendes hinzufügen image Die Upload-Anfrage wird an die soeben geschriebene Bild-Upload-Schnittstelle weitergeleitet.

Zu diesem Zeitpunkt haben wir die Bild-Upload-Funktion des Rich-Text-Editors UMEditor in ThinkPHP6 erfolgreich implementiert. Entwickler können ähnliche Methoden verwenden, um die Bild-Upload-Funktion anderer Rich-Text-Editoren zu implementieren.

Das obige ist der detaillierte Inhalt vonWie lade ich Bilder in den Rich-Text-Editor in ThinkPHP6 hoch?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!