Comment télécharger des images vers l'éditeur de texte enrichi dans ThinkPHP6 ?

ThinkPHP6, en tant qu'excellent framework PHP, fournit une multitude de bibliothèques et d'outils d'exploitation, permettant aux développeurs de réaliser plus rapidement les exigences fonctionnelles. Dans le développement Web, les éditeurs de texte enrichi sont souvent utilisés comme l'un des outils nécessaires pour aider les utilisateurs à modifier le contenu plus facilement. Cependant, lorsque les utilisateurs souhaitent insérer des images, ils doivent disposer de la fonction de téléchargement d'images.

Cet article utilisera UMEditor comme exemple pour présenter comment implémenter la fonction de téléchargement d'images de l'éditeur de texte enrichi dans ThinkPHP6.

Première étape : introduisez UMEditor

Placez les fichiers de ressources d'UMEditor (y compris js, css, images, etc.) dans le répertoire public sous le répertoire du projet, puis ajoutez les à la page HTML Présentez les fichiers de ressources associés d'UMEditor. Un exemple est le suivant :

<!-- 引入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>

Étape 2 : Écrire l'interface de téléchargement d'image

Dans ThinkPHP6, l'écriture de l'interface peut être réalisée via la classe Route et la classe Controller .

1. Créez un fichier upload.php dans le répertoire routes, le code est le suivant :

<?php
use thinkacadeRoute;

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

La méthode contrôleur de ce mappage de route est le contrôleur de téléchargement. La méthode uploadImage.

2. Créez un répertoire API dans le répertoire de l'application, puis créez un contrôleur Upload et un service UploadService dans le répertoire API. Le code est le suivant :

. #🎜🎜 #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 :

<?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(),
        ];
    }
}

Dans UploadService, nous utilisons la fonction de stockage de fichiers fournie par ThinkPHP6 pour atteindre l'objectif de téléchargement d'images. L'implémentation spécifique utilise la classe Filesystem et la classe Config. Dans le fichier de configuration config/filesystem.php, la méthode de stockage et le chemin correspondant doivent être configurés.

Étape 3 : Configurer UMEditor

Instancier UMEditor dans la page HTML et configurer l'interface de téléchargement d'image :

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

   # 🎜🎜 #

Configurez le chemin de téléchargement de fichiers d'UMEditor :

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

Dans contrôleur.php, la demande de téléchargement d'image doit être transmise à l'interface de téléchargement d'image que nous venons d'écrire.

Jusqu'à présent, nous avons implémenté avec succès la fonction de téléchargement d'images de l'éditeur de texte enrichi UMEditor dans ThinkPHP6. Les développeurs peuvent utiliser des méthodes similaires pour implémenter la fonction de téléchargement d'images d'autres éditeurs de texte enrichi.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!